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

Animation
File Size: 96.5 KB
Views Total: 2126 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

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.


Table of Contents

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

List Of Version :

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.