Responsive Background Parallax Scrolling Effect with jQuery

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.