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

Animation
File Size: 96.5 KB
Views Total: 2343 views
Last Update:January 1, 1970
Publish Date: March 9, 2020
Official Website: Go to website
License: MIT
Plugin Author: geosigno
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

Thanks for make jQuery plugin is developed by geosigno For more Helpfull for users, please check the demo page or visit the official website.

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.

Related jQuery Plugins

You Might Also Like