2017-01-28 21:05:36 +01:00
# vanilla-tilt.js
2017-03-22 14:40:39 +01:00
[![npm version ](https://badge.fury.io/js/vanilla-tilt.svg )](https://badge.fury.io/js/vanilla-tilt)
2017-01-29 13:10:55 +01:00
A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version) ](https://github.com/gijsroge/tilt.js ).
2017-01-28 10:35:45 +01:00
2017-01-29 18:18:49 +01:00
[View landing page (demos) ](https://micku7zu.github.io/vanilla-tilt.js/ )
2017-01-28 10:35:45 +01:00
### Usage
```html
< body >
2021-03-29 15:17:16 +02:00
<!-- your markup element -->
2017-01-29 13:10:55 +01:00
< div class = "your-element" data-tilt > < / div >
<!-- at the end of the body -->
< script type = "text/javascript" src = "vanilla-tilt.js" > < / script >
2017-01-28 10:35:45 +01:00
< / body >
```
2019-04-12 22:28:57 +02:00
If you want to use this library in IE, you need to include a CustomEvent polyfill: https://github.com/micku7zu/vanilla-tilt.js/issues/49#issuecomment-482711876 or maybe consider the [jQuery version ](https://github.com/gijsroge/tilt.js ).
2017-01-28 10:35:45 +01:00
### Options
```js
2017-01-29 13:10:55 +01:00
{
2018-10-17 19:01:03 +02:00
reverse: false, // reverse the tilt direction
2021-11-03 08:14:50 +01:00
max: 15, // max tilt rotation (degrees)
startX: 0, // the starting tilt on the X axis, in degrees.
startY: 0, // the starting tilt on the Y axis, in degrees.
2018-10-17 19:01:03 +02:00
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.
2022-10-27 13:04:15 +02:00
axis: null, // What axis should be enabled. Can be "x" or "y".
2019-04-12 20:48:58 +02:00
reset: true, // If the tilt effect has to be reset on exit.
2022-12-13 00:00:15 +01:00
"reset-to-start": true, // Whether the exit reset will go to [0,0] (default) or [startX, startY]
2018-10-17 19:01:03 +02:00
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
2019-04-12 20:48:58 +02:00
glare: false, // if it should have a "glare" effect
2018-10-17 19:01:03 +02:00
"max-glare": 1, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
"glare-prerender": false, // false = VanillaTilt creates the glare elements for you, otherwise
2018-10-17 19:03:57 +02:00
// you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
2022-02-20 19:10:54 +01:00
"mouse-event-element": null, // css-selector or link to an HTML-element that will be listening to mouse events
2019-04-12 20:48:58 +02:00
"full-page-listening": false, // If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
gyroscope: true, // Boolean to enable/disable device orientation detection,
gyroscopeMinAngleX: -45, // This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element;
gyroscopeMaxAngleX: 45, // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element;
gyroscopeMinAngleY: -45, // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element;
gyroscopeMaxAngleY: 45, // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element;
2019-04-12 22:57:54 +02:00
gyroscopeSamples: 10 // How many gyroscope moves to decide the starting position.
2017-01-29 13:10:55 +01:00
}
2017-01-28 10:35:45 +01:00
```
### Events
```js
const element = document.querySelector(".js-tilt");
VanillaTilt.init(element);
2017-12-17 15:56:03 +01:00
element.addEventListener("tiltChange", callback);
2017-01-28 10:35:45 +01:00
```
### Methods
```js
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();
2018-12-14 09:41:15 +01:00
// It also supports NodeList
const elements = document.querySelectorAll(".js-tilt");
VanillaTilt.init(elements);
2017-01-28 10:35:45 +01:00
```
### Install
You can copy and include any of the following file:
2019-04-13 09:55:36 +02:00
* [dist/vanilla-tilt.js ](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.js ) ~ 15kb
* [dist/vanilla-tilt.min.js ](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.min.js ) ~ 8.5kb
* [dist/vanilla-tilt.babel.js ](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.babel.js ) ~ 16.5kb
* [dist/vanilla-tilt.babel.min.js ](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.babel.min.js ) ~ 9.5kb
2017-01-29 13:10:55 +01:00
2017-03-08 10:24:53 +01:00
#### NPM
2017-02-23 23:33:43 +01:00
Also available on npm https://www.npmjs.com/package/vanilla-tilt
```
npm install vanilla-tilt
```
2021-05-17 13:59:03 +02:00
Import it using
```
import VanillaTilt from 'vanilla-tilt';
```
2019-05-06 08:37:34 +02:00
### Known issues
- [Getting weird rendering issues on Safari ](https://github.com/micku7zu/vanilla-tilt.js/issues/22 )
2017-01-29 13:13:06 +01:00
### Credits
Original library: [Tilt.js ](http://gijsroge.github.io/tilt.js/ )
Original library author: [Gijs Rogé ](https://twitter.com/GijsRoge )
2017-01-29 13:10:55 +01:00
2018-12-22 23:33:15 +01:00
#### Contributors
- [Livio Brunner ](https://github.com/BrunnerLivio ) < < a href = "mailto:contact@brunnerliv.io" > contact@brunnerliv.io</ a > > (Typings & Glare Effect)
- [Oleg Postoev ](https://github.com/Dok11 )
- [Matteo Rigon ](https://github.com/matteo-rigon ) (Device orientation support)
2019-04-08 20:34:07 +02:00
- [Corey Austin ](https://github.com/lazyhummingbird ) (Initial gyroscope position)
2019-04-12 23:16:22 +02:00
- [Sander Moolin ](https://github.com/SaFrMo )
2019-04-12 20:48:58 +02:00
- [rrroyal ](https://github.com/rrroyal ) (Whole document mouse events listening)
2018-12-22 23:33:15 +01:00
2022-01-10 08:59:12 +01:00
### Other projects
#### [Quick Cursor: One-Handed mode](https://play.google.com/store/apps/details?id=com.quickcursor) (Android app)
Play Store link: https://play.google.com/store/apps/details?id=com.quickcursor
2022-01-10 09:03:38 +01:00
### Buy me a beer 🍻
If you want to thank me for vanilla-tilt.js or Quick Cursor Android app, you can [donate on PayPal ](https://www.paypal.me/micku7zu?locale.x=en_US ): https://www.paypal.me/micku7zu?locale.x=en_US
2017-01-29 13:10:55 +01:00
### License
2017-06-13 10:50:53 +02:00
MIT License