Tilt on hover using Vanilla-tilt.js

#javascript #webdev #ui #ux

Steps:

Add jQuery cdn

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

Add Vanilla-tilt.js cdn

<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.7.2/lib/vanilla-tilt.min.js"></script>

Add Attributes according to effect you require. For eg.

data-tilt - mark your element
data-tilt-max="50" - max tilt rotation (degrees)
data-tilt-speed="400" - speed of the transition

Final code -

<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="your-element" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="500"></div>
    <script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.7.2/lib/vanilla-tilt.min.js"></script>
</body>
</html>