Image Parallax Scroll Effect JavaScript Library - SimpleParallax

Image Parallax Scroll Effect JavaScript Library - SimpleParallax
File Size: 153 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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
$ 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="https://unpkg.com/simple-parallax-js"></script>

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

<img class="simple-parallax" src="https://picsum.photos/1920/720/?random" 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.

para.destroy();

Changelog:

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.