Highly Customizable jQuery Parallax Scrolling Plugin - PRI-Parallax
File Size: | 636 KB |
---|---|
Views Total: | 5556 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

PRI-Parallax is a jQuery plugin that makes it easy to implement the familiar Parallax scrolling effect on background images with lots of customization options.
Basic usage:
1. Download and include the core JavaScript file jquery.priparallax.min.js
after jQuery JavaScript library.
<script src="//code.jquery.com/jquery-1.11.3.js"></script> <script src="dist/jquery.priparallax.min.js"></script>
2. Add a background image to the page section where you want to apply the parallax scrolling effect to.
<div id="section"> ... </div>
#section { background-image: url('bg.jpg'); background-size: 150% auto !important; overflow: hidden; position: relative; }
3. Active the background parallax scrolling effect on the page section.
("#section").priparallax();
4. Options and defaults.
("#section").priparallax({ // trigger element trigger : "", // postion options top : "0", bottom : "0", elementTop : "100%", elementBottom : "0", precision : "0", // enable the plugin on mobile mobile : false, // delay time wait : "100", // animation duration duration : "300", /* { 0 : { "backgroundPosition": ["0%", "50%"], }, 100 : { "backgroundPosition": ["50%", "0%"], } } */ animation : {} });
Change log:
2016-01-30
- v1.0.0
2015-12-15
- Minor changes
2015-12-10
- fixed demo link
This awesome jQuery plugin is developed by devpri. For more Advanced Usages, please check the demo page or visit the official website.