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);" 
     data-speed="0.5">
</div>
<div class="myParallax" 
     style="background-image: url(bg-2.jpg);" 
     data-speed="0.7">
</div>
<div class="myParallax"
     style="background-image: url(bg-3.jpg);" 
     data-speed="0.5">
</div>
...

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="//code.jquery.com/jquery.min.js"></script> 
<script src="parallax.js"></script> 

4. Activate the parallax plugin and done.

$(".myParallax").parallax();

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', "");
  return;
}

---

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