deblan-mirror/vanilla-tilt.js
deblan-mirror/vanilla-tilt.js
1
0
Fork 0
mirror of https://github.com/micku7zu/vanilla-tilt.js synced 2024-06-27 17:40:02 +02:00
Code Issues Projects Releases Wiki Activity

Update readme

Browse source
This commit is contained in:
micku7zu 2017-01-29 14:10:55 +02:00
parent 1e20d05f5e
commit 449e86912f
2 changed files with 23 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
README.md
View file

@ -1,32 +1,31 @@
# vanilla-tilt.js # vanilla-tilt.js
Rewritten from [Tilt.js](https://github.com/gijsroge/tilt.js). A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https://github.com/gijsroge/tilt.js).
**All copyright goes to [https://github.com/gijsroge/tilt.js](https://github.com/gijsroge/tilt.js)**
A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect without any dependencies. [View landing page (demos)](https://micku7zu.github.io/vanilla-tilt.js/landing/index.html)
![Tilt.js demo gif](http://gijsroge.github.io/tilt.js/tilt.js.gif)
####Take a look at the **[landing page](https://micku7zu.github.io/vanilla-tilt.js/index.html)** for demo's.
### Usage ### Usage
```html ```html
<!DOCTYPE html>
<body> <body>
<div data-tilt></div> <!-- Tilt element --> <div class="your-element" data-tilt></div>
<script src="vanilla-tilt.js"></script> <!-- Load vanilla-tilt.js library -->
<!-- at the end of the body -->
<script type="text/javascript" src="vanilla-tilt.js"></script>
</body> </body>
``` ```
### Options ### Options
```js ```js
max: 35, //maxTilt {
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets. max: 35, // max tilt rotation (degrees)
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit. perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
scale: 1, // 2 = 200%, 1.5 = 150%, etc.. scale: 1, // 2 = 200%, 1.5 = 150%, etc..
speed: 300, // Speed of the enter/exit transition. speed: 300, // Speed of the enter/exit transition
transition: true, // Set a transition on enter/exit. transition: true, // Set a transition on enter/exit.
axis: null, // What axis should be disabled. Can be X or Y. axis: null, // What axis should be disabled. Can be X or Y.
reset: true // If the tilt effect has to be reset on exit. reset: true // If the tilt effect has to be reset on exit.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
}
``` ```
### Events ### Events
@ -62,3 +61,8 @@ TO DO (automatically build those):
* dest/vanilla-tilt.babel.min.js ~ 4.3kb * dest/vanilla-tilt.babel.min.js ~ 4.3kb
in your webiste. in your webiste.
### License
MIT License

4
src/vanilla-tilt.js
View file

@ -1,6 +1,6 @@
/** /**
* Created by micku7zu on 1/27/2017. * Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: http://gijsroge.github.io/tilt.js/ * Original idea: https://github.com/gijsroge/tilt.js
* MIT License. * MIT License.
* Version 1.0.1 * Version 1.0.1
*/ */