59
GitHub - gijsroge/tilt.js: A tiny 60+fps parallax tilt hover effect for jQuery.
source link: https://github.com/gijsroge/tilt.js
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
readme.md
Tilt.js
A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.
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: event
Methods
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
Alternatives
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK