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

File Size: 2.04 MB
Views Total: 17947
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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

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>


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



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

<script src=""></script> 
<script src="jquery.imageScroll.js"></script> 

3. Call the plugin with options.


// 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.


Change logs:


  • removed excessive x and y css values


  • added Browserify/CommonJS support


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


  • Bug fix and improvement of calculations


  • Parallax does now work when coverRatio is 1


  • fixed a minor bug.


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


  • minor cache improvement


  • 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.