Press "Enter" to skip to content

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

Forked smooth 3D tilt JavaScript library from Tilt.js library (jQuery version) to create interactive parallax tilt effects on DOM elements using requestAnimationFrame.

mouse movement parallax effect, tilt hover effect, 3d tilt effect css, tilt on hover css, mouse move parallax jquery, tilt js mobile, image tilt effect

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

Official Website(micku7zu): Click Here

This superior jQuery/javascript plugin is developed by micku7zu. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.