jQuery Plugin To Add Interative Parallax Effects To Objects - Piao
File Size: | 32 KB |
---|---|
Views Total: | 4423 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.