Image Parallax Scroll Effect JavaScript Library - SimpleParallax

A simple, lightweight jQuery JavaScript parallax solution applies a subtle Parallax Scroll Effect to any images in your React or Vanilla JavaScript applications.

Install & download:

# NPM
$ npm install simple-parallax --save

# Bower
$ bower install simple-parallax --save

How to use it:

1. Import the SimpleParallax into your React or Vanilla JavaScript project.

// Vanilla JS
import SimpleParallax from "simple-parallax-js/vanilla";

// React
import SimpleParallax from "simple-parallax-js";

2. Apply the parallax effect to images.

// Vanilla JS
var image = document.getElementsByClassName('parallax-image');
new simpleParallax(image);
// OR all images
var images = document.querySelectorAll('img');
new simpleParallax(images);

// React
const Component = () => (
  <SimpleParallax>
    <img src="parallax.jpg" alt="parallax image" />
  </SimpleParallax>
)

// Next.js
import Image from "next/image";
const Component = () => (
  <SimpleParallax>
    <Image src="parallax.jpg" alt="parallax image" width={1920} height={1024} />
  </SimpleParallax>
)

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

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

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

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

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

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. Apply the parallax effect on a custom scroll container.

var para = new simpleParallax(images,{
    customContainer: 'custom container',
    customWrapper: false
});

10. Determin the percentage (1-99) where the parallax should stop.

var para = new simpleParallax(images,{
    maxTransition: 0
});

11. Destroy the plugin.

para.destroy();

12. Refresh the plugin.

para.refresh();

Changelog:

v6.0.1 (2024-06-19)

• remove useless and buggy css from the container

v6.0.0 (2024-06-15)

• Supports React.js

v5.6.2 (2020-08-20)

• update

v5.6.1 (2020-07-27)

• ensure simple parallax is initialized on SVG at page load
• add a isInit class

v5.5.1 (2020-06-21)

• hotfix

v5.5.0 (2020-06-09)

• set the delay at 0 by default

v5.5.0 (2020-06-08)

• add a refresh method

v5.4.1 (2020-05-26)

• fix issue with lazy loaded images

v5.4.0 (2020-04-08)

• Add support for videos
• Add new customWrapper setting 

v5.3.0 (2020-02-02)

• add maxTransition parameter

v5.2.0 (2019-12-08)

• Fixed an issue when the translation was applied after the transition, so the first translation on load time looked buggy.
• Removed the breakpoint parameter, as this should be managed outside the simpleParallax plugin.
• Added a new customContainer parameter for those who want to apply the parallax on a custom scroll container (rather than the document itself).

v5.1.0 (2019-06-13)

• ImpleParallax can now be initialized from a string as element
• Refactoring destroy method
• Improve the way resize method is handle

v5.0.1 (2019-06-04)

• Fix Uncaught TypeError: simpleParallax is not a constructor

v5.0.0 (2019-05-23)

• Gulp is not used anymore and has been replaced by Webpack and its libraryTarget set as UMD.
• Now have a global simpleParallax container that initiates as many as you want instances of each parallax image. The controller and the instance are separated in two different files.
• simpleParallax is now using the Intersection Observer API to check is an element is visible or not.
• Destroy method has been simplified.
• Breakpoint setting is now taking into consideration when user resize the window.
• optimisation has been done with the Request Animation Frame. Now if you create a new parallax instance after you already created one before, this will be added in the same animation frame to gain performance. Really useful when you want different orientations of parallax in the same page.
• no more IE11 support, polyfills have been removed. IE was never able to render the parallax effect properly anyway. If you still want to ensure compatibility to IE11, use the version 4.2.1.
• 4 new orientations have been added - up left, up right, down left, and down right.

v4.2.1 (2019-03-10)

• Improved responsive images with simpleParallax
• Fixed an issue with IE11

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

2018-09-14

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

2018-06-21

• add delay parameter

2018-04-04

• use CSS hardware acceleration for animations

2018-03-19

• JS update

2018-03-15

• destroy method implementation

2018-01-15

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

2017-11-27

• update class name typo

2017-11-23

• making the plugin compatible with CommonJS for npm users

2017-11-22

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

2017-11-22

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