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;
}
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").