Search code examples
jqueryjquery-mobilemobileparallax

jquery mobile multipage parallax

I build a page with jqm 1.4 and want use parallax effect for only one page in the div content layer, but I can't find a plugin which supported multipage with jqm. Know somebody a solution?

Regards, Chris

Solution

  • Here is a DEMO

    It uses the plugin called skrollr found here: https://github.com/Prinzhorn/skrollr/tree/master/examples#examples

    In the demo, page1 has the parallax effect and page 2 is a normal jQM page. In Page one, the content DIV has a background image and data attributes used by the skrollr plugin:

    <div data-role="content" id="theContent" data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;">

#theContent{
    background:url(http://prinzhorn.github.io/skrollr/examples/images/bubbles.png) repeat fixed;
}

    Within the content div is a centered div with some background transparency so the image shows through. Finally on page1 pageinit we initialize the parallax effect:

    $(document).on("pageinit", "#page1", function(){
    skrollr.init({
        forceHeight: false
    });
});