Image Parallax Scroll Effect JavaScript Library - SimpleParallax

Image Parallax Scroll Effect JavaScript Library - SimpleParallax
File Size: 122 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, 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: 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:

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.