2017-01-28 21:05:36 +01:00
|
|
|
# vanilla-tilt.js
|
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 13:10:55 +01:00
|
|
|
[View landing page (demos)](https://micku7zu.github.io/vanilla-tilt.js/landing/index.html)
|
2017-01-28 10:35:45 +01:00
|
|
|
|
|
|
|
|
### Usage
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<body>
|
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>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Options
|
|
|
|
|
```js
|
2017-01-29 13:10:55 +01:00
|
|
|
{
|
|
|
|
|
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.
|
|
|
|
|
}
|
2017-01-28 10:35:45 +01:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Events
|
|
|
|
|
```js
|
|
|
|
|
const element = document.querySelector(".js-tilt");
|
|
|
|
|
VanillaTilt.init(element);
|
|
|
|
|
element.addEventListeners("tiltChange", callback);
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 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();
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Install
|
|
|
|
|
You can copy and include any of the following file:
|
|
|
|
|
|
2017-01-29 08:48:41 +01:00
|
|
|
TO DO (automatically build those):
|
|
|
|
|
|
2017-01-28 21:05:36 +01:00
|
|
|
* 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
|
2017-01-28 10:35:45 +01:00
|
|
|
|
2017-01-29 08:48:41 +01:00
|
|
|
in your webiste.
|
2017-01-29 13:10:55 +01:00
|
|
|
|
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
|
|
|
|
|
|
|
|
### License
|
|
|
|
|
|
|
|
|
|
MIT License
|
