Responsive Performant Background Parallax Effect - Parallax Background

Just another parallax jQuery plugin that makes use of requestAnimationFrame to implement smooth, performant parallax scrolling effects on the background images when you scroll down/up the webpage. Fully responsive design and works perfectly on mobile devices.

How to use it:

1. Add the jQuery parallax-background.js script to the webpage after you've add jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/parallax-background.js"></script>

2. The required html structure for the parallax layers.

<div class="parallax-container">
  <div class="img img1"></div>
</div>

<div class="parallax-container">
  <div class="img img2"></div>
</div>

<div class="parallax-container">
  <div class="img img3"></div>
</div>

3. The required CSS styles.

.parallax-container {
  overflow: hidden;
  position: relative;
}

.img {
  background-position: 50% 50%;
  background-size: cover;
  display: none;
  position: absolute;
  width: 100%;
}

4. Add custom parallax images as backgrounds to the layers.

.img1 {
  background-image: url('1.jpg');
  height: 90vh;
  top: -10vh;
}

.img2 {
  background-image: url('2.jpg');
}

.img3 {
  background-image: url('3.jpg');
}

5. Just call the plugin and we're done.

$('.parallax-container').parallaxBackground({
  'image': '.img'
});

Change log:

2016-06-30

• Use outerHeight

2016-06-12

• Separate paint laters for each element

---

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