A Smooth 3D Parallax Tilt Effect JavaScript Library | vanilla-tilt.js

How to make use of it:

Download and place the principle JavaScript file vanilla-tilt.js on the backside of the webpage.

<script src="vanilla-tilt.js"></script>

Apply the parallax tilt impact to your component utilizing HTML data attribute as complying with:

<div data-tilt></div>

Or initialize the parallax tilt impact with the next configuration choices.

VanillaTilt.init(document.querySelectorAll(".element"), {
  reverse: false,
  max: 35,
  perspective: 1000,
  easing: "cubic-bezier(.03,.98,.52,.99)",
  scale: 1,
  speed: 300,
  transition: true,
  axis: null,
  glare: false,
  "max-glare": 1,
  "glare-prerender": false,
  "mouse-event-element": null,
  reset: true
});

API strategies.

// Destroy
element.vanillaTilt.destroy();

// Get values
element.vanillaTilt.getValues();

// Reset
element.vanillaTilt.reset();

Perform a motion when the tilt adjustments.

element.addEventListener("tiltChange", callback);

Interactive Parallax Tilt Effect, vanilla-tilt.js Plugin/Github

See Demo And Download