Search code examples
jqueryipadparallax

Horizontal parallax on touch devices


I need a horizontal parallax scroll to work on touch devices. I am making a game where you will be able to scroll sideways only. I need a couple of layers (at least three) that will move in diffrent paces. I have tried a couple of plugins (jInvertScroll and Stellar.js to name a few) but can't get it to work. Is there a simple way to do this from scratch?

EDIT: Can't get Stellar.js to work. This is the snippet: I assume that Stellar finds the objects and moves them accordingly since two boxes have display:none; at start. And that they get absolute positioning. But they don't move. At this stage I just want them to move. And, what steps do I need to take to have this effect on an iPad/tablet.

jQuery libraries:

<script src="js/jquery.stellar.min.js"></script>
<!-- OWN JQUERY -->
<script src="js/javascript.js"></script>

jQuery:

$('#parallaxElements').stellar({
    horizontalScrolling: true
});

HTML:

<!-- PICTURES AND LAYERS -->
<div id="content">
    <div id="parallaxElements">
        <div id="forgrund" class="frontdrop" data-stellar-ratio="2" style="background:tomato;width:200px;height:50px;">
        </div>

        <div id="kullarna" class="middledrop" data-stellar-ratio="1" style="background:purple;width:200px;height:50px;">
        </div>

        <div id="bg" class="backdrop" data-stellar-ratio="0.5" style="background:blue;width:200px;height:50px;">
        </div>
    </div>
</div>

CSS:

#content{
    position:relative;
    width:1024px;
    height:768px;
    background-color:gray;
    overflow:scroll;
}
#bg, #kullarna, #forgrund{
    width:2050px;
    position:absolute;
}
#bg{
    height:768px;
}
#kullarna{
    z-index:10;
}
#forgrund{
    z-index:11;
    height:600px;
}

Solution

  • Ended up using this plugin! http://robbiestewart.ca/wordpress/parallaxSwipe/parallax.html It works great! It has both vertical parallax and horizontal (the horizontal is wrongly named though "parallaxVertical.js").