jQuery Plugin For Parallax Scrolling Background Image - qpScroll

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

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.