• 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
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



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

KEY CASES

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



FURTHER CONFIGUARATION

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!!

10 views
whizzystack logo

About Us

 

We 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

Whizzystack

Our Developers

Contact Us

 New Jersey     

+1(877)3685420

 sid.baker@whizzystack.com 

 

 India   

+91(95)60641297

 +91(120)4287309 

 info@whizzystack.com

Subscribe to Our Blog

Sign up to receive email notifications when Whizzystack drops more knowledge.

  • LinkedIn
  • Facebook
  • Twitter
  • Instagram
  • RSS