Parallax Scroll For Image Plugin With Vanilla JS – simpleParallax.js

Animation
Demo    Download
Parallax Scroll For Image Plugins With Vanilla JS – simpleParallax
File Size: 96.5 KB
Views Total: 766 views
Last Update:March 22, 2020
Publish Date: March 9, 2020
Official Website: Go to website
License: MIT

Simple parallax.js illustrates the image plugin in javascript with horizontal and vertical parallax effect. In this animation, the two images can simultaneously visualize in two different panes by just dragging the adjustable length option with the help of a mouse in a horizontal and vertical manner. The effect includes only images, no other content is used in this element. Fundamentally, the general behavior of this effect to analyze the myth of depth in a 2D display and adding to the insight of immersion in the pragmatic sense.


How to use :

Add script :

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

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

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

var images = document.querySelectorAll('img');
new simpleParallax(images);
Settings
nametypedefaulthint
orientationStringupup – right – down – left – up left – up right – down left – left right
scaleNumber1.2need to be above 1.0
overflowBooleanfalse
delayNumber0.4the delay is in second
transitionString‘cubic-bezier(0,0,0,1)’any CSS transition
customContainerString or Nodefalse
maxTransitionNumber0it should be a percentage between 1 and 99
Done


Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.