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>
<script src="jquery.js" ></script>
<script src="tilt.js"></script>
</body>
Options
maxTilt: 20,
perspective: 1000,
easing: "cubic-bezier(.03,.98,.52,.99)",
scale: 1,
speed: 300,
transition: true,
disableAxis: null,
reset: true,
glare: false,
maxGlare: 1
Events
const tilt = $('.js-tilt').tilt();
tilt.on('change', callback);
tilt.on('tilt.mouseLeave', callback);
tilt.on('tilt.mouseEnter', callback);
Methods
const tilt = $('.js-tilt').tilt();
tilt.tilt.destroy.call(tilt);
tilt.tilt.getValues.call(tilt);
tilt.tilt.reset.call(tilt);
Install
- yarn:
yarn add tilt.js
- npm:
npm install --save tilt.js
CDN
Alternatives