Simplest Background Parallax Effect With jQuery - html-parallax

File Size: 3.69 KB
Views Total: 2207
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simplest Background Parallax Effect With jQuery - html-parallax

This is the simplest jQuery plugin for creating a subtle parallax scrolling effect on your background image that is configurable via HTML data attributes. 

How to use it:

1. Add your own background images to the parallax containers and specify the animation speed via 'data-speed' attribute as shown below:

<div class="myParallax"
     style="background-image: url(bg-1.jpg);" 
<div class="myParallax" 
     style="background-image: url(bg-2.jpg);" 
<div class="myParallax"
     style="background-image: url(bg-3.jpg);" 

2. The parallax containers must have a fixed height:

.myParallax {
  height: 400px;
  background-size: cover;

3. Insert jQuery library and the jQuery html-parallax plugin's script into the document.

<script src="//"></script> 
<script src="parallax.js"></script> 

4. Activate the parallax plugin and done.


5. By default, the plugin will automatically disable the parallax scroll effect when the screen size is less than 768px. You're able to adjust the default breakpoint in the JavaScript as this:

if (varWidthWindow < 768)
  $(this).css('background-position', "");

This awesome jQuery plugin is developed by mjmakhija. For more Advanced Usages, please check the demo page or visit the official website.