Responsive Performant Background Parallax Effect - Parallax Background

Responsive Performant Background Parallax Effect - Parallax Background
File Size: 10.3 KB
Views Total: 5794
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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="//"></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 class="parallax-container">
  <div class="img img2"></div>

<div class="parallax-container">
  <div class="img img3"></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.

  'image': '.img'

Change log:


  • Use outerHeight


  • 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.