mirror of https://github.com/micku7zu/vanilla-tilt.js synced 2024-06-28 01:50:02 +02:00

Go to file

micku7zu dc7810b319 Add credits to original author		2017-01-29 14:13:06 +02:00
landing	Fix wrong element position and change default maxTilt	2017-01-29 14:01:04 +02:00
src	Update readme	2017-01-29 14:10:55 +02:00
.gitignore	Add .gitignore	2017-01-27 20:34:20 +02:00
index.html	Change landing page and demo.	2017-01-29 09:48:41 +02:00
LICENSE	Initial commit	2017-01-27 20:32:50 +02:00
README.md	Add credits to original author	2017-01-29 14:13:06 +02:00

README.md

vanilla-tilt.js

A smooth 3D tilt javascript library forked from Tilt.js (jQuery version).

View landing page (demos)

Usage

<body>
<div class="your-element" data-tilt></div>

<!-- at the end of the body -->
<script type="text/javascript" src="vanilla-tilt.js"></script>
</body>

Options

{
    max:            35,     // max tilt rotation (degrees)
    perspective:    1000,   // Transform perspective, the lower the more extreme the tilt gets.
    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.
    easing:         "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/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:

TO DO (automatically build those):

dest/vanilla-tilt.js ~ 6kb
dest/vanilla-tilt.min.js ~ 3.5kb
dest/vanilla-tilt.babel.js ~ 8.5kb
dest/vanilla-tilt.babel.min.js ~ 4.3kb

in your webiste.

Credits

Original library: Tilt.js

Original library author: Gijs Rogé

License

MIT License