jQuery Plugin For Parallax Scrolling Background Image - qpScroll
File Size: | 228 KB |
---|---|
Views Total: | 2639 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

qpScroll is a simple and easy jQuery resolution to move background images with a subtle parallax scrolling effect when scrolling down the page.
How to use it:
1. Load the latest jQuery javascript library and jQuery qpScroll plugin at the bottom of the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="qpscroll.js"></script>
2. Call the plugin on the body
tag or any DIV element where you want to apply the parallax scrolling effect to its background images.
<script> $(document).ready(function(){ $('body').qpScroll({ imagesFolder: "images", // folder where the images are kept imagesArray: [ '1.jpg', '2.jpg' ], // an array of background images firstSpeed: 10, // how much slower should the scroll be - 10 means 10 times slower neighbourRatio: 1.02, // how much faster should the next image go compared to the one before offset: 250, // how much should each image cover the other image (in pixels) zIndex: -1000 // if for some reason you need to move around the background to be ahead or behind something }); }); </script>
This awesome jQuery plugin is developed by oofaish. For more Advanced Usages, please check the demo page or visit the official website.