Node.js SimpleParallax.js Example to Add Parallax Effect to Images & Videos in Website Using simple-parallax-js Library in Javascript Full Project For Beginners

 

 

npm i simple-parallax-js

 

 

 

 

Installation

Old way

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

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

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

<script src=https://cdn.jsdelivr.net/npm/simple-parallax-js@5.6.1/dist/simpleParallax.min.js></script>

Via npm/yarn

You can also install it via:

#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:

const image = document.getElementsByClassName(thumbnail);
new simpleParallax(image);

and voilà!


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

const images = document.querySelectorAll(img);
new simpleParallax(images);

Once simpleparallax has been correctly initialized, it adds the simple-parallax-initialized class on the container.

simpleParallax now works with video:

<video>
  <source src=video.mp4 type=video/mp4>
</video>
var video = document.getElementsByTagName(video);
new simpleParallax(video);

Settings

Setting Type Default Hint
orientation String up up – right – down – left – up left – up right – down left – down right
scale Number 1.3 need to be above 1
overflow Boolean false
delay Number 0 the delay is in second Watch out, sometimes this delay is causing issue on iOS devices #47
transition String any CSS transition
customContainer String or Node
customWrapper String the selector of the custom wrapper
maxTransition Number 0 it should be a percentage between 1 and 99

You can apply these settings with the following JS code:

var images = document.querySelectorAll(.thumbnail);
new simpleParallax(images, {
    delay: 0,
    orientation: down,
    scale: 1.3,
    overflow: true,
    customContainer: .container,
    customWrapper: .wrapper
});

 

 

Methods

refresh

Refresh a simpleParallax instance (to recalculate all the positions):

var images = document.querySelectorAll(img);
var instance = new simpleParallax(images);
instance.refresh();

By default, the refresh method is fired at every window resize.

destroy

Destroy a simpleParallax instance:

var images = document.querySelectorAll(img);
var instance = new simpleParallax(images);
instance.destroy();

 

 

 

DOWNLOAD FULL SOURCE CODE

 

Leave a Reply