Image Parallax Scroll Effect With jQuery - SimpleParallax

Image Parallax Scroll Effect With jQuery - SimpleParallax
File Size: 9.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A simple, lightweight jQuery plugin which applies a subtle Parallax Scroll Effect to any images within the document using CSS3 transform's scale and translate properties.

Install & download:

$ npm install simple-parallax --save

# Bower
$ bower install simple-parallax --save

How to use it:

1. Import the latest version of jQuery library and the jQuery SimpleParallax plugin into the document.

<script src="" 
<script src="src/simpleParallax.js"></script>

2. Initialize the plugin on the image and done.

<img class="simple-parallax" src="" alt="image parallax">
$(document).ready(function() {

3. This will wrap the image into a parallax container as follow:

<div class="easy-parallax" style="overflow:hidden">
  <img class="simple-parallax" src="" alt="image parallax" style="transform: scale(1.2) translateY(-54.1732px);">

4. Set the orientation of the parallax scroll.

$(document).ready(function() {
    'orientation': 'down'

5. Set the scale ratio of your parallax image.

$(document).ready(function() {
    'scale': '1.2'

Change log:



  • destroy method implementation


  • add rate error to avoid issue when image translate out of its container


  • update class name typo


  • making the plugin compatible with CommonJS for npm users


  • update init function so the calculation can be executed at the first load of the screen without any scroll


  • add requestAnimationFrame to the animate function

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