Simple jQuery Plugin For Parallax Scrolling Effect – parallax.js

Parallax js is very simple and light-weight plugin for parallax jQuery scrolling that creates smooth parallax effects. The implementation process of the plugin is very easy and anyone can implement this without any coding knowledge. There are various options to customize the plugin and you can modify them accordingly.

Features:

• Jquery parallax plugin can be installed with NPM, Bower and Yarn.
• Very easy to implement and light-weight.
• Supports to modify position and speed.
• Can be modified width and height of the parallax elements.

Install with NPM

$ npm i --save jquery-parallax.js

Install with Bower

$ bower i --save parallax.js

Install with Yarn

$ yarn add jquery-parallax.js

How to use it:

1. Include the Javascript parallax.min.js at the bottom of the web page.

<script src="path/to/parallax.min.js"></script>

2. Add the basic HTML to the page.

<div class="parallax-window" data-parallax="scroll" data-image-src="path/to/demo-3.jpg"></div>

3. Add a height/min-height to parallax-window through CSS, without height the parallax animation will not work.

.parallax-window {
  min-height: 400px;
  background: transparent;
}

4. One more thing I noticed that .parallax-mirror is getting a minus value automatically z-index: -100 and for this z-index value the parallax will not appear to the page. Then I have added an extra CSS to fix the problem given below.

.parallax-mirror{
  z-index: 1 !important;
}

Via JavaScript

You can also call the parallax scrolling jQuery plugin manually with jQuery.

$('.parallax-window').parallax({
   imageSrc: '/path/to/image.jpg'
});

Plugin’s default options: