Skip to content
Simple and tiny JavaScript library which adds parallax animations on any images
JavaScript HTML
Branch: master
Clone or download
geosigno Merge pull request #35 from geosigno/dependabot/npm_and_yarn/handleba…

⬆️ Bump handlebars from 4.1.2 to 4.5.3
Latest commit 8dff9f1 Dec 28, 2019

simpleParallax logo

GitHub version code style: prettier

What is simpleParallax?

simpleParallax is a very simple and tiny Vanilla JS library which adds parallax animations on any images.

Where it may be laborious to get results through other plugins, simpleParallax 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. You can read one case study here.

Any image will fit. Try it out!


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

<script src=""></script>

or you can install it via npm/yarn:

npm install simple-parallax-js

yarn add simple-parallax-js

You can import it as follow:

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


Setting Type Default Hint
orientation string up up - right - down - left - up left - up right - down left - down right
scale int 1.3 need to be above 1.0
overflow boolean false
delay int 0.4 the delay is in second
transition string false any CSS transition
customContainer string or node false this can be a string of directly a node

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'

orientation - string

This is the direction of the parallax effect. Choose up and when scrolling down, the image will translate from bottom to top. When scroll up, the image will translate from top to bottom.

scale - int

The higher the scale is set, the more visible the parallax effect will be. In return, the image will lose in quality. To reduce the lossless effect, if the scale is set at 1.5 and you image is 500px width, do the simple math 500 * 1.5 = 750. So you can choose a 750px image to replace your 500px one, and don't see any quality leak.

overflow - boolean

By default, the image is scaled to apply a parallax effect without any overflow on the layout (you can check the case study to have a better understanding). when overflow is set to true, the image will translate out of its natural flow.

delay - int

When a delay is set, the translation of the image will slightly continue when the user stop scrolling. That gives a very nice effect.

transition - string

The transition works closely with the delay setting. The transition will add any CSS effect to the delay setting.

customContainer - string or node

In some cases, you want the parallax effects to be apply on a container that have its own scroll, and not apply the parallax effects via the document scroll.


Destroy a simpleParallax instance:

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


You can find some examples here.


You can apply simpleParallax on picture tags/srcset images.


Geoffrey Signorato


Open an issue or a pull request to suggest changes or additions.

You can’t perform that action at this time.