Image Parallax Scroll Effect JavaScript Library - SimpleParallax

Image Parallax Scroll Effect JavaScript Library - SimpleParallax

A simple, lightweight jQuery Vanilla JavaScript 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 SimpleParallax or directly load the SimpleParallax library from a CDN.

// ES 6
import simpleParallax from 'simple-parallax-js';
// browser
<script src=""></script>

2. Apply the parallax effect to images you specify. That's it.

<img class="simple-parallax" src="" alt="image parallax">
var images = document.getElementsByClassName('simple-parallax');
var para = new simpleParallax(images);

3. Apply a custom delay to the parallax effect. Default: 0.6.

var para = new simpleParallax(images,{
    delay: .8

4. Set the orientation of the parallax scroll: up (default), down, left or right.

var para = new simpleParallax(images,{
    orientation: 'down'

5. Set the scale ratio of your parallax image. Default: 1.2.

var para = new simpleParallax(images,{
    scale: '1.5'

6. Apply a transiton effect to the parallax effect.

var para = new simpleParallax(images,{
    transition: 'cubic-bezier(0,0,0,1)'

8. Decide whether to apply an overlay on the original image. Default true.

var para = new simpleParallax(images,{
    overflow: true

9. Set the minimum breakpoint in pixels to activate the parallax effect. Default: false.

var para = new simpleParallax(images,{
    breakpoint: 768

10. Destroy the plugin.



v4.1.1 (2019-03-07)

  • Make SimpleParallax instance accessible
  • fix an issue with picture tag where init keep going
  • Doc update

v4.0.0 (2019-01-07)

  • fix an issue with options override

v3.1.2 (2018-10-08)

  • use getBoundingClientRect to avoid issue when parent is relative


  • add breakpoint params
  • fix issue with load event with picture and srcset


  • add delay parameter


  • use CSS hardware acceleration for animations


  • JS update


  • 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 geosigno. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 07.03.2019
  • Source