qpScroll is a jQuery plugin that creates a parallax background for any page or div. You can see an example at http://www.cigari.co.uk/qpscroll. It is super simple to setup. It can be added to any existing page without the need to change the mark up.
I have kept it super simple - the three major settings are: - how much faster/slower do images move compared to the scroll speed - how much faster/slower does each image scroll compared to one before it - how much does each image cover the one before it
Make sure you have jQuery loaded - link the following file:
<script type="text/javascript" src=“qpscroll.js"></script>
And then set a parallax background like so:
$(document).ready(function(){
$('body').qpScroll({
imagesFolder: 'images/parallax’,//folder where the images are kept
imagesArray: [ '1.jpg','2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg' ],
firstSpeed: 5,//first image scrolls 5 times slower than the page.
neighbourRatio: 1.1,//each image scrolls 1.1 times (or 10%) faster than the image before it
offset: 0,//in pixels, how much should each image cover the one before it.
});
});
I have only tested it on latest Chrome, Firefox and Safari.
Let me know if there are any fun features you like to see in it. It currently does what I need it to do for one of my own projects. Feel free to use it as it wish, but I would appreciate a plug to my website http://www.cigari.co.uk
Copyright (c) 2013 Ali Cigari @oofaish