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
| name | type | default | hint |
|---|---|---|---|
| orientation | String | up | up – right – down – left – up left – up right – down left – left right |
| scale | Number | 1.2 | need to be above 1.0 |
| overflow | Boolean | false | |
| delay | Number | 0.4 | the delay is in second |
| transition | String | ‘cubic-bezier(0,0,0,1)’ | any CSS transition |
| customContainer | String or Node | false | |
| maxTransition | Number | 0 | it should be a percentage between 1 and 99 |
