Responsive Background Parallax Scrolling Effect with jQuery
File Size: | 4.94 KB |
---|---|
Views Total: | 13985 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another jQuery parallax plugin that enables the familiar parallax scroll effects on background images as you scroll up/down the page. Works perfectly on responsive website that the background images will be auto resized & centered on window resize.
How to use it:
1. Download and import the jQuery simpleParallax plugin after jQuery JavaScript library like so:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="simpleparallax.js"></script>
2. Create DIV elements and use data-dir attribute to specify the scroll direction.
<div id="demo-1" data-dir="up" class="parallax"></div> <div id="demo-2" data-dir="down" class="parallax"></div>
3. Add background images to the DIVs. Please note that the background images must be higher than the DIV elements.
.parallax { height: 200px; background-size: cover; background-size: cover; } #demo-1 { background-image: url(1.jpg); } #demo-2 { background-image: url(2.jpg); }
4. Call the function to enable the background image parallax scrolling effect on scroll.
$('.parallax').simpleParallax();
This awesome jQuery plugin is developed by fbarrailla. For more Advanced Usages, please check the demo page or visit the official website.