mirror of https://github.com/micku7zu/vanilla-tilt.js synced 2024-06-22 23:36:27 +02:00

Go to file

Sandor Sergiu b714ab19c1 Update version to 1.4.2		2018-10-17 19:44:00 +03:00
dist	Update JSDoc	2018-10-15 14:35:07 +03:00
lib	Update JSDoc	2018-10-15 14:35:07 +03:00
src	Update version to 1.4.2	2018-10-17 19:44:00 +03:00
.babelrc	Remove "add-module-exports"	2017-01-30 21:22:56 +02:00
.editorconfig	add project setup with package.json, babel, rollup and build + deploy scripts	2017-01-29 03:20:29 +01:00
.gitattributes	add project setup with package.json, babel, rollup and build + deploy scripts	2017-01-29 03:20:29 +01:00
.gitignore	Fixes for publishing to NPM	2017-02-23 23:44:41 +02:00
.npmignore	add npmignore	2017-02-22 14:41:19 +01:00
build.js	Fix build of minified versions and add package-lock.json	2017-06-13 15:28:03 +03:00
CONTRIBUTORS.md	Update contributors.md	2017-06-13 10:53:36 +02:00
LICENSE	Initial commit	2017-01-27 20:32:50 +02:00
package-lock.json	Adding more flexibility for mouse move events +build	2018-10-12 18:52:10 +03:00
package.json	Update version to 1.4.2	2018-10-17 19:44:00 +03:00
README.md	Update readme.md	2018-10-15 14:32:30 +03: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

{
    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
    mouseEventElement: null    // css-selector or link to HTML-element what will be listen mouse events 
}

Events

const element = document.querySelector(".js-tilt");
VanillaTilt.init(element);
element.addEventListener("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