https://codesandbox.io/s/nameless-worker-z31nt
Added the tilt effect to cards by react-parallax-tilt
mkosir
/
react-parallax-tilt
π Easily apply tilt hover effect to React components - lightweight/zero dependencies 3kB
React Tilt
π Easily apply tilt hover effects to React components
Install
npm install react-parallax-tilt
Features
- Lightweight 3kB, zero dependencies π¦
- Tree-shakable π³ ESM and CommonJS support
- Works with React v15 onwards
- Supports mouse and touch events
- Support for device tilting (gyroscope)
- Glare effect π with custom props (color, position, etc.) πdemo
- Event tracking for component values π (tilt, glare, mousemove, etc.) πdemo
- Multiple built-in effects:
Example
import Tilt from 'react-parallax-tilt';
const App = () => {
return (
<Tilt>
<div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
<h1>React Parallax Tilt π</h1>
</div>
β¦
https://codesandbox.io/embed/nameless-worker-z31nt?fontsize=14&hidenavigation=1&theme=dark
Top comments (0)