the easiest way to get a parallax effect with javascript

Go down to the website content

simpleParallax.js is a simple and tiny JavaScript library which adds parallax animations on any images.

Where it may be laborious to get results through other plugins, simpleParallax.js stands out for its ease and its visual rendering. The parallax effect is directly applied on image tags, there is no need to use background images.

Any image will fit. Try it out!

simmleParallax illustration image


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

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

or use the below CDN link provided by

<script src=""></script>

or you can install it via npm/yarn

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

simpleParallax can be import this way

import simpleParallax from 'simple-parallax-js';


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);

This also work with several images:

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


orientationstringupup - right - down - left - up left - up right - down left - left right
scaleint1.2need to be above 1.0
delayint0.4the delay is in second
transitionstring'cubic-bezier(0,0,0,1)'any CSS transition
customContainerstring or nodefalsethis can be a string of directly a node
maxTransitionint0the percentage where the parallax should stop (between 1 and 99)


Destroy a simpleParallax instance:

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


Spread the word! Share it via: