How to use Tilt.js

Basic Usage

<div class="your-element" data-tilt></div>

<script type="text/javascript" src="vanilla-tilt.js"></script>

CDN Links

https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.babel.js

https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.babel.min.js

https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.js

https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js

Also available on npm:

npm install vanilla-tilt

How to use Tilt.js

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>CSS Tutorial</title>
</head>
<body>

<img data-tilt data-tilt-max="20" data-tilt-speed="400" data-tilt-perspective="500"  src="https://via.placeholder.com/300x300" class="js-tilt">


<script>
$('.js-tilt').tilt({
    scale: 1.2
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>

</body>
</html> 
Documentation

Documentation (jQuery version)
1,094 Views
84952cookie-checkHow to use Tilt.js

Leave a Reply

Your email address will not be published. Required fields are marked *