Responsive Background Parallax Scrolling Effect with jQuery

File Size: 4.94 KB
Views Total: 14005
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.


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