jQuery Plugin For Parallax Scrolling Background Image - qpScroll
| File Size: | 228 KB |
|---|---|
| Views Total: | 2672 |
| 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.











