To achieve this effect, you can set the background-image to either the body element or a page division on your website.
If you opt for setting it to the body, you will experience an animated background transition. In this case, you need to ensure that the page division is made transparent.
body {
background-image: url(image.png);
}
.ui-page {
background: transparent !important;
}
During the pagecontainerbeforechange event, calculate the new position of the background by multiplying the index of the page being navigated to by the screen/window width and updating the background's background-position-x.
On the initial page, keep the background-position-x at 0. Also, add a listener for pagecontainercreate to obtain the index() of the page being navigated to.
$(document).on("pagecontainercreate", function () {
$(document).on("pagecontainerbeforechange", function (e, data) {
if (typeof data.toPage == "object") {
var index = data.toPage.index(),
screenWidth = window.innerWidth;
$("body").animate({
'background-position-x': "-" + screenWidth * index + "px"
});
}
});
});
Check out the Demo!
Alternatively, you can set the background-image directly to the page division and adjust the background-position-x based on the index() during the pagecreate event for each page.
.ui-page {
background-image: url(image.png);
}
$(document).on("pagecreate", function (e) {
var index = $(e.target).index(),
screenWidth = window.innerWidth;
$(e.target).css({
"background-position-x": "-" + screenWidth * index + "px"
});
});
View the Demo here!