Tilt.js
A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.
Weights just ⚖1.71kb Gzipped
landing page for demos.
Take a look at theUsage
<!-- Tilt element --> <!-- Load jQuery first --> <!-- Load Tilt.js library -->
Options
maxTilt: 20perspective: 1000 // Transform perspective, the lower the more extreme the tilt gets.easing: "cubic-bezier(.03,.98,.52,.99)" // Easing on enter/exit.scale: 1 // 2 = 200%, 1.5 = 150%, etc..speed: 300 // Speed of the enter/exit transition.transition: true // Set a transition on enter/exit.disableAxis: null // What axis should be disabled. Can be X or Y.reset: true // If the tilt effect has to be reset on exit.glare: false // Enables glare effectmaxGlare: 1 // From 0 - 1.
Events
const tilt = ;tilt; // parameters: event, transformstilt; // parameters: eventtilt; // parameters: event
Methods
const tilt = ; // Destroy instancetilttiltdestroy; // Get values of instancetilttiltgetValues; // returns [{},{},etc..] // Reset instancetilttiltreset;
Install
- yarn:
yarn add tilt.js
- npm:
npm install --save tilt.js
CDN
- https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.1.21/tilt.jquery.min.js
- https://unpkg.com/tilt.js@1.1.21/dest/tilt.jquery.min.js