JavaScript Image Parallax Scroll – SimpleParallax

JavaScript Image Parallax Scroll – SimpleParallax

Last updated:

JavaScript image Parallax scroll is simple and small Vanilla JS library that can add parallax animations on any images.

It is difficult to get good results through other plugins but Parallax.js use to extend the ease and graphic rendering. The parallax effect is applied to image tags in a straight line, so there is no need to use background images. It can fir any image.

Installation

Simply copy/paste the below snippet just before your closing tag:

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

or use the below CDN link provided by jsDelivr.com:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/simpleParallax.min.js"></script>

You can also install it via npm/yarn

// npm
npm install simple-parallax-js
 
// yarn
yarn add simple-parallax-js

and then import it as follows:

// ES6 import
import simpleParallax from 'simple-parallax-js';
 
// CommonJS
const simpleParallax = require('simple-parallax-js');

Initialization

Giving the following HTML:

<img class="thumbnail" src="image.jpg" alt="image">

simply add the following JavaScript code:

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);

and voilà!

You can also choose to apply the parallax on multiple images:

var images = document.querySelectorAll('img');
new simpleParallax(images);
JavaScript Image Parallax Scroll

Settings

NameTypeDefaultHint
OrientationStringupup – right – down – left – up left – up right – down left – left right
ScaleNumber1.2need to be above 1.0
OverflowBooleanfalse
DelayNumber0.4the delay is in second
TransitionString‘cubic-bezier(0,0,0,1)’any CSS transition
CustomContainerString or Node“”
CustomWrapperString“”
MaxTransitionNumber0it should be a percentage between 1 and 99

Check the demo and download JavaScript Image Parallax Scroll from below button

Your email address will not be published. Required fields are marked *

More Stories
jQuery Responsive Full screen Image Gallery-Story Show Gallery Plugin
jQuery Responsive Full screen Image Gallery – Story Show Gallery Plugin