node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »

vanilla-tilt

vanilla-tilt.js

npm version ghit.me

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

{
    reverse:           false,  // reverse the tilt direction 
    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. 
    glare:             false   // if it should have a "glare" effect 
    "max-glare":       1,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%) 
    "glare-prerender": false   // false = VanillaTilt creates the glare elements for you, otherwise 
                               // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself 
}

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:

NPM

Also available on npm https://www.npmjs.com/package/vanilla-tilt

npm install vanilla-tilt

Typings

Installing typings using npm

npm install @types/vanilla-tilt

Credits

Original library: Tilt.js

Original library author: Gijs Rogé

License

MIT License