Interactive Parallax Tilt Effect In Vanilla JavaScript – vanilla-tilt.js

Preview:

Description:

vanilla-tilt.js is a lightweight JavaScript library for creating interactive parallax tilt effects on DOM elements using requestAnimationFrame.

Similar to the Apple tvOS’ poster parallax effect. Without any dependencies and is fully customizable.

How to use it:

Download and place the main JavaScript file vanilla-tilt.js at the bottom of the webpage.

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

Apply the parallax tilt effect to your element using HTML data attribute as follow:

<div data-tilt></div>

Or initialize the parallax tilt effect with the following configuration options.

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,
  "reset-to-start": true,
});

API methods.

// Destroy
element.vanillaTilt.destroy();
// Get values
element.vanillaTilt.getValues();
// Reset
element.vanillaTilt.reset();

Perform an action when the tilt changes.

element.addEventListener("tiltChange", callback);

Changelog:

v1.8.1 (08/15/2023)

• Fix destroy() method

v1.8.0 (12/13/2022)

• Add reset-to-start attribute

v1.7.3 (10/30/2022)

• Update

v1.7.2 (09/05/2021)

• Update

v1.7.1 (07/28/2021)

• Fix big screw distort on Firefox

v1.7.0 (04/13/2019)

• Fixed and refactored some code

v1.6.2 (04/13/2019)

• Added gyroscopeSamples
• Added full-page-listening

12/28/2018

• v1.6.1: Fix gyroscope false

12/23/2018

• v1.6.0: Fix first onDeviceOrientation call from desktop

09/20/2018

• Clear everything on destroy().