the easiest way to get a parallax effect with javascript

Go down to the website content

simpleParallax.js is a very simple and tiny Vanilla JS library that 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 to 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>

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


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


orientationStringupup - right - down - left - up left - up right - down left - left right
scaleNumber1.2need to be above 1.0
delayNumber0.4the delay is in second
transitionString'cubic-bezier(0,0,0,1)'any CSS transition
customContainerString or Node""
maxTransitionNumber0it should be a percentage between 1 and 99


Destroy a simpleParallax instance:

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

See it live on

  • Azurelo Theme

Want your website here? Just ask!


Spread the word! Share it via: