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
Simple Background Image Parallax Effect with jQuery and HTML5

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="//"></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">

3. Initialize the plugin and done. No any CSS rules required.


4. More Html5 data attributes:

  • data-parallax-img-width: width of the background image
  • data-parallax-img-height: height of the background image
  • data-parallax-ratio: aspect ratio of the background image
  • data-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.