vanillaTilt.js. Tilt.js without jQuery.

Rewritten from Tilt.js. All copyright goes to https://github.com/gijsroge/tilt.js

A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect without any dependencies.

####Take a look at the landing page for demo's.

Usage

<!DOCTYPE html>
<body>
    <div data-tilt></div> <!-- Tilt element -->
    <script src="vanillaTilt.js"></script> <!-- Load vanillaTilt.js library -->
</body>

Options

max:            20,     //maxTilt
perspective:    1000,   // Transform perspective, the lower the more extreme the tilt gets.
easing:         "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
scale:          1,      // 2 = 200%, 1.5 = 150%, etc..
speed:          300,    // Speed of the enter/exit transition.
transition:     true,   // Set a transition on enter/exit.
axis:           null,   // What axis should be disabled. Can be X or Y.
reset:          true    // If the tilt effect has to be reset on exit.

Events

const element = document.querySelector(".js-tilt");
VanillaTilt.init(element);
element.addEventListeners("tiltChange", callback);

Methods

const element = document.querySelector(".js-tilt");
VanillaTilt.init(element);

// Destroy instance
element.vanillaTilt.destroy();

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

// Reset instance
element.vanillaTilt.reset();

Install

You can copy and include any of the following file:

dest/vanillaTilt.js ~ 6kb
dest/vanillaTilt.min.js ~ 3.5kb
dest/vanillaTilt.babel.js ~ 8.5kb
dest/vanillaTilt.babel.min.js ~ 4.3kb

in your webiste.

1.8 KiB Raw Blame History