• Whizzystack Solutions

With simpleParallax: the simplest way to build parallax scrolling

SimpleParallax is a very simple and tiny JavaScript library that adds animated parallax to any image.

The parallax effect is applied directly to image identifiers, as most other parallax libraries do, so there is no need to use a background image. Parallax effects can be applied to a production website without breaking its structure.

You may choose to add the parallax to image tags / srcset images, too. Implementation is simple, and the animation is smooth and natural.

Installation is very straightforward. You may choose to include the script in your Code directly:

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

Or choose to install it via npm/yarn:

npm install simple-parallax-js
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';


You can target any images you like, to add the parallax effect. For instance,.
 <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);


If you don't define any parameters by default, simpleParallax will use the up orientation. When scrolling down it will result in the picture being translated from bottom to top, and when scrolling up from top to bottom. Among these orientations, you can choose from-up-right-down-left-up-right-down-hand-right.If you wish to apply different settings to different images, do not hesitate to initialize several simpleParallax instances. The library must dynamically connect the new instances to current instances in the same method loop. Therefore it does not consume any extra output.

<img class="left" src="image1.jpg" alt="image">
 <img class="right" src="image2.jpg" alt="image">
var imageLeft = document.querySelector('.left'),
 imageRight = document.querySelector('.right');
new simpleParallax(imageLeft, { 
 orientation: 'left' 
new simpleParallax(imageRight, { 
 orientation: 'right' 


The parallax effect is created by applying a scaling effect to the image. You can easily adjust the scaling effect (the default value is 1.3). The higher the scale is set, the stronger the parallax effect will be, and more noticeable.

new simpleParallax(image, { 
 scale: 2 

Another interesting setting is overflow. By default, the overflow is set at false. If set to real, then the image is translated from its natural flow.

new simpleParallax(image, { 
 overflow: true 

As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!

This article is contributed by Ujjainee. She is currently pursuing a Bachelor of Technology in Computer Science . She likes most about Computer Engineering is that it allows her to learn and be creative. Also, She believes in sharing knowledge hence is very fond of writing technical contents for the same. Coding, analyzing and blogging are things which She can keep on doing!!


Recent Posts

See All
 You can unsubscribe in one click, and I will never share your email address.

About Whizzystack

  • LinkedIn
  • Facebook
  • Twitter
  • Instagram
  • RSS

We are User Experience Consultant, Conversion Rate Optimization Specialist and expert in digital transformation. We help savvy marketers, product owners and UX advocates make the case that a useable, accessible and people-first experience is the best path to business success. All the while pursuing his not-so-hidden agenda. We also build & support your own talented, trusted, full-time development team hosted out of Whizzystack’s headquarters in India. We also deliver world class product and software development services Read more

What We Do

Software Development

Web Application Development

Mobile Application Development Web Portal Development

Ecommerce Development

Custom Software Development

Web Presence

UI/UX Development

Digital Marketing

Social Media Management

Search Engine Optimization

Online Reputation Management

Web Experience

UI/UX Prototyping

System Designing

Service Designing 

System Integration

Performance Optimization

Our Developers

Contact Whizzystack

USA :     +1(877)3685420

India:    +91(95)60641297


Pemberton Brown Mills Road,

Brown Mills, New Jersey, USA, 08015

Bouleward Walk, Habitapur, Noida, Uttar Pradesh, India, 20109