React.js - Tilt.js
React version of tilt.js
Demo
https://vx-demo.now.sh/gallery
Install
- yarn:
yarn add react-tilt
- npm:
npm install --save react-tilt
Usage
<Tilt className="Tilt" options= max : 25 style= height: 250 width: 250 > <div className="Tilt-inner"> 👽 </div></Tilt>
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.
API
Property | Signature |
---|---|
onMouseEnter | () -> SyntheticEvent |
onMouseMove | () -> SyntheticEvent |
onMouseLeave | () -> SyntheticEvent |
options | Object |
Roadmap
- Tests
- Add Flare effect
Alternatives
- JQuery JS version: https://github.com/gijsroge/tilt.js
- Vanilla JS version: https://github.com/micku7zu/vanilla-tilt.js