Tilt.js is a tiny requestAnimationFrame lightweight parallax tilt effect for jQuery. This plugin is useful to create beautiful 3d parallax effect on landing pages.
To use tilt.js plugin, download plugin source code from github Alternatively you can directly use tilt.js CDN.
Include tilt.js before </body>
tag.
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>
</body>
Add data-tilt
attribute to element which you want to create tilt effect. You can also create effect on elements or images.
<div data-tilt></div>
Or initialize tilt effect manually using css selector.
<div class="tilt"></div>
<script type="text/javascript">
$('.tilt').tilt();
</script>
That's it. Now refresh the page and hover mouse over div element.
To change tilt behaviour, pass options object into tilt()
method.
<script type="text/javascript">
$('.tilt').tilt({
scale: 1.2,
glare: true,
maxGlare: .5
});
</script>
Below options are available to change tilt behaviour.
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.
All options are can also passed through data-attributes.
<div data-tilt data-tilt-speed="300" data-tilt-glare="false"></div>
tilt.js supports below methods to stop, reset tilt effect.
// initialize tilt effect
const tilt = $('.tilt').tilt();
// remove tilt instance
tilt.tilt.destroy.call(tilt);
// get values of tilt instance
tilt.tilt.getValues.call(tilt); // returns [{},{},etc..]
// reset tilt instance
tilt.tilt.reset.call(tilt);
You can also perform task on tilt events. You can use below events to run callback function.
// initialize tilt effect
const tilt = $('.tilt').tilt();
// parameters: event, transforms
tilt.on('change', callback);
// parameters: event
tilt.on('tilt.mouseLeave', callback);
// parameters: event
tilt.on('tilt.mouseEnter', callback);
For example, the second parameter will return mouse position and tilt effect percentages.
const tilt = $('.tilt').tilt();
tilt.on('change', function(e, transforms) {
console.log(transforms);
});
This will return below output:
{
"tiltX": "-20.75",
"tiltY": "17.40",
"percentageX": 153.75727335611978,
"percentageY": 137.0046122868856,
"angle": 129.98117479276118
}
For more details, visit official documentation. I hope you will like this article.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to install elastic search in local system and live server
Laravelcode write one of the very helpfu...Get and Set HTML using jQuery html method
jQuery html() method allows you to get c...How to Send email in Django using Google SMTP server
Sending emails is one of the important p...How to Install and Use Wine on Ubuntu 20.04
Wine is open source software that enable...How to check whether a value is numeric or not in jQuery
Use the jQuery.isNumeric() method You...