DEV Community

yash kumat
yash kumat

Posted on

Tilt on hover using Vanilla-tilt.js

Steps:

  1. Add jQuery cdn

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

  1. Add Vanilla-tilt.js cdn

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

  1. 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>

Enter fullscreen mode Exit fullscreen mode

Discussion (0)