jQuery Plugin For Parallax Scrolling Background Image - qpScroll

File Size: 228 KB
Views Total: 2664
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.

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

This awesome jQuery plugin is developed by oofaish. For more Advanced Usages, please check the demo page or visit the official website.