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