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]
Laravel 7 - Column sorting with pagination example
In this article, I will share with you h...How to get the values of selected checkboxes in a group using jQuery
Use the jQuery :checked select...Auto Complete City Google Map API In Laravel
Hello, everyone in this tutorials we are...How to check or uncheck radio button dynamically using jQuery
Use the jQuery prop() method You can...PHP - Create file if it doesn’t already exist
In this article, we will use PHP to chec...