Demo - Simple jQuery Plugin For Parallax Scrolling Effect

Parallax.js is very simple and light-weight jQuery plugin for parallax 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:

It 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 plugin manually with jQuery.

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

Plugin's default options:

Name	type	default	description
imageSrc	path	null	You must provide a path to the image you wish to apply to the parallax effect.
naturalWidth	number	auto	You can provide the natural width and natural height of an image to speed up loading and reduce error when determining the correct aspect ratio of the image.
naturalHeight	number	auto
position	xPos yPos	center center	This is analogous to the background-position css property. Specify coordinates as top, bottom, right, left, center, or pixel values (e.g. -10px 0px). The parallax image will be positioned as close to these values as possible while still covering the target element.
positionX	xPos	center
positionY	yPos	center
speed	float	0.2	The speed at which the parallax effect runs. 0.0 means the image will appear fixed in place, and 1.0 the image will flow at the same speed as the page content.
zIndex	number	-100	The z-index value of the fixed-position elements. By default these will be behind everything else on the page.
bleed	number	0	You can optionally set the parallax mirror element to extend a few pixels above and below the mirrored element. This can hide slow or stuttering scroll events in certain browsers.
iosFix	boolean	true	iOS devices are incompatable with this plugin. If true, this option will set the parallax image as a static, centered background image whenever it detects an iOS user agent. Disable this if you wish to implement your own graceful degradation.
androidFix	boolean	true	If true, this option will set the parallax image as a static, centered background image whenever it detects an Android user agent. Disable this if you wish to enable the parallax scrolling effect on Android devices.