Spotify-Like Parallax Scrolling Effect with jQuery - Parallax.js

Yet another jQuery parallax plugin that helps you create Spotify-like parallax scrolling effect on your web page.

Installation:

$ npm install jquery-parallax.js --save

How to use it:

1. Include jQuery javascript library and the jQuery parallax.js in the Html document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/parallax.js"></script>

2. Add a parallax effect behind an Html element using data-* attributes.

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

3. Or using JS call.

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

4. Available options. To pass options to parallax.js, you may use an HTML5 data-* attribute, or an options object passed to the initialization function.

  // The image you wish to apply to the parallax effect.
imageSrc: null, 

// The natural width and natural height of an image
naturalWidth: auto, 
naturalHeight: auto,

// The speed at which the parallax effect runs
// 0.0 means the image will appear fixed in place,
// 1.0 means the image will flow at the same speed as the page content.
speed: 0.2,

// 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.
position: 0 0,

// The z-index value of the fixed-position elements. 
// By default these will be behind everything else on the page.
zIndex: -100, 

// Extend a few pixels above and below the mirrored element.
// This can hide slow or stuttering scroll events in certain browsers.
bleed: 0, 

// 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.
iosFix: 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.
androidFix: true,

// If true, will freeze the parallax effect when "over scrolling" in browsers like Safari to prevent unexpected gaps caused by negative scroll positions.
overScrollFix: false

Changelog:

2022-05-11

• Fix an error occurred only on mobile devices

2017-10-10

• small bug fix: add quote around url for background-image css
• small bug fix:  iOS fix fails with spaces in image file name

2016-01-30

• v1.4.2

2015-12-21

• JS update.

2015-02-26

• reverse event definition order so they are triggered in the correct order on "load"

2015-01-29

• add option to correct for vertical overscroll in certain browsers with overScrollFix option

2014-12-05

• fixed a bug.

---

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