Simple Background Image Parallax Effect with jQuery and HTML5
File Size: | 3.53 KB |
---|---|
Views Total: | 7527 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

parallax.js is a very small jQuery plugin which helps you apply background image parallax scrolling effects to your website using html5 data attributes and a single line of jQuery.
How to use it:
1. Include the jQuery parallax.js script after you have jQuery library loaded.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="parallax.js"></script>
2. Add a parallax background image to your container using data-parallax-img
attribute.
<div class="parallax" data-parallax-img="bg.jpg"> ... </div>
3. Initialize the plugin and done. No any CSS rules required.
$(function(){ parallaxInit('.parallax') });
4. More Html5 data attributes:
data-parallax-img-width
: width of the background imagedata-parallax-img-height
: height of the background imagedata-parallax-ratio
: aspect ratio of the background imagedata-parallax-expand
: scaling of the background image
This awesome jQuery plugin is developed by viniabreulima. For more Advanced Usages, please check the demo page or visit the official website.