Tilt.js
A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.
Weights just âš–1.71kb Gzipped
Take a look at the landing page for demos.
Usage
<!DOCTYPE html> <body> <div data-tilt></div> <!-- Tilt element --> <script src="jquery.js" ></script> <!-- Load jQuery first --> <script src="tilt.js"></script> <!-- Load Tilt.js library --> </body>Options
maxTilt: 20, perspective: 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 effect maxGlare: 1 // From 0 - 1.Events
const tilt = $('.js-tilt').tilt(); tilt.on('change', callback); // parameters: event, transforms tilt.on('tilt.mouseLeave', callback); // parameters: event tilt.on('tilt.mouseEnter', callback); // parameters: eventMethods
const tilt = $('.js-tilt').tilt(); // Destroy instance tilt.tilt.destroy.call(tilt); // Get values of instance tilt.tilt.getValues.call(tilt); // returns [{},{},etc..] // Reset instance tilt.tilt.reset.call(tilt);Install
- yarn:
yarn add tilt.js - npm:
npm install --save tilt.js
CDN
- https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js
- https://unpkg.com/[email protected]/dest/tilt.jquery.min.js
