Simple Background Parallax Effect Plugin For jQuery - parallaxDiv.js

parallaxDiv.js is a super tiny jQuery plugin for applying a parallax scrolling effect on the background image of a container that reacts the position of the cursor or the orientation of a smart device that has gyroscope or motion detection hardware enabled.

How to use it:

1. Create a container where you want to apply a background parallax effect on.

<div id="demo"></div>

2. Load the jQuery library and jQuery parallaxDiv.js in the html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="jquery.parallaxdiv.js"></script> 

3. Specify a background image for the container and enable the parallax effect by calling the plugin with optional settings.

<script>
var basePhotoURL = "http://lorempixel.com/600/450" // background image
$('#demo').parallaxDiv(basePhotoURL,{
pixelMargin: 40,
wrappername: "parallaxWrap"
});
</script> 

Change log:

2014-03-07

• Update to support context in div

2014-03-06

• version update.

---

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