The Easiest Way To Create Parallax Scrolling With simpleParallax

JavaScript

SimpleParallax is a very simple and tiny JavaScript library which adds parallax animations on any images.

The parallax effect is added directly on image tags, there is no need to use background-image like most of the other parallax libraries do. Basically, you can add parallax effects on a production website without breaking its layout.

You can also choose to apply the parallax on picture tags/srcset images. The implementation is quite straightforward and the animation is smooth and natural.

Installation

Installation is very simple. You can choose to include the script directly into your HTML:

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

Or choose to install it via npm/yarn:

#npm
npm install simple-parallax-js

#yarn
yarn add simple-parallax-js

Once you have installed it via a package manager, you can import it as follows:

import simpleParallax from 'simple-parallax-js';

Initialization

To add the parallax effect, you can target any images you want. For example:

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

Simply add the following JavaScript code:

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

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

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

Main cases

By default, if you do not specify any parameters, simpleParallax will use the up orientation. It will result in the image translating from bottom to top when scrolling down, and from top to bottom when scrolling up.

You can choose among these orientations - up - right - down - left - up left - up right - down left - down right.

If you wish to apply different settings on various images, don't hesitate to initialize several instances of simpleParallax. The library will automatically add the new instances in the same process loop of current instances. Therefore, no extra performance will be consumed.

 <img class="left" src="image.jpg" alt="image">
 <img class="right" src="image.jpg" alt="image">
var imageLeft = document.querySelector('.left'),
    imageRight = document.querySelector('.right');

new simpleParallax(imageLeft, { 
    orientation: 'left' 
});
new simpleParallax(imageRight, { 
    orientation: 'right' 
});

More settings

The parallax effect is created with a scaling effect applied to the image. This scaling effect can be easily changed (the default value is 1.3). The higher the scale will be set, the faster and more visible the parallax effect will be.

new simpleParallax(image, { 
    scale: 2 
});

overflow is another interesting setting. The overflow is set to false by default. If set to true, the image will be translated out of its natural flow. 

new simpleParallax(image, { 
    overflow: true 
});

Useful links

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles