Simple Spotify-Like jQuery Image Parallax Effect Plugin - Parallax ImageScroll

Parallax ImageScroll is a simple and easy jQuery plugin for creating image parallax effects when scrolling the page, inspired by Spotify.com.

How to use it:

1. Markup html structure. Set the options via data-* attributes or  javascript.

<div class="demo" data-image="img/1.jpg" data-width="1600" data-height="900"></div>

<section>
TEXT CONTENT
</section>

<div class="demo" data-image="img/2.jpg" data-width="1600" data-height="900"></div>

<section>
TEXT CONTENT
</section>

...

2. Include the jQuery library and jQuery Parallax ImageScroll plugin in the footer.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="jquery.imageScroll.js"></script> 

3. Call the plugin with options.

$('.demo').imageScroll({

// The image to show.
image: null, 

// The data attribute name for images.
// Uses the value of this attribute to load the image.
imageAttribute: 'image', 

// Class added to image holder(s). 
holderClass: 'imageHolder', 

// The element to which the parallax image(s) will be attached to.
container: $('body'), 

// The window object which listens to scroll and resize events
windowObject: $(window),

// The speed of the parallax effect. 
speed: 0.2, 

// How many percent of the screen each image should cover. 
coverRatio: 0.75, 

// The minimum height of the image in pixels.
holderMinHeight: 200, 

// The maximum height of the image in pixels
holderMaxHeight: null,

// Extra height added to the image. 
extraHeight: 0, 

// The original width of the image.
mediaWidth: 1600, 

// The original height of the image.
mediaHeight: 900, 

// Whether or not you want the parallax effect.
parallax: true, 

// Presents a mobile/tablet friendly version, 
// no parallax effect and smaller images 
// (should be used with a mobile/tablet optimized image)
touch: false 

});

4. Public events.

imageScroll('disable');
imageScroll('refresh');
imageScroll('enable');
imageScroll('destroy');

Change logs:

2015-07-08

• removed excessive x and y css values

2015-06-30

• added Browserify/CommonJS support

2015-02-06

• Added public methods: disable(), enable(), refresh(), destroy()

2014-06-07

• Bug fix and improvement of calculations

2014-06-03

• Parallax does now work when coverRatio is 1

2014-04-24

• fixed a minor bug.

2014-04-10

• Class added to image holder(s). Name can be set via a new option: holderClass

2014-01-15

• minor cache improvement

2013-12-10

• added position absolute for images, needed when css transform is not supported
• small fix

0.1 (2013-12-06)

• Added new 'parallax' and 'touch' options.
• Added a mobile fallback demo page.

---

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