jQuery Plugin To Add Interative Parallax Effects To Objects - Piao

A very lightweight jQuery parallax plugin that makes it easier to implement an interactive parallax effect on any Html elements when mouse moving. 

How to use it:

1. Load the jQuery javascript library and jQuery piao.js at the bottom of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script type="text/javascript" src="piao.js"></script> 

2. Create Html objects in a container you want to apply on a parallax effect.

<div class="wrapper">
<div class="object1"></div>
<div class="object2"></div>
<div class="object3"></div>
...
</div>

3. Make sure to add position: absolute; property to these objects in the CSS.

.objectN {
position: absolute;
...
}

4. Call the plugin on the container and custom the parallax effect using javascript array parameters.

<script type="text/javascript">
var piao = $('.wrapper').piao([
{
item : $('.object1'),
xrate : 1,
yrate :1,
invert : true
},
{
item : $('.object2'),
xrate : 0.1,
yrate :0.1,
stop:true
},
{
item : $('.object3'),
xrate : 20,
yrate :20
}
])
</script>

Change log:

2014-04-11

• building 2

---

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