How to use Tilt.js Javascript Library

Tilt.js is a lightweight parallax hover tilt effect addon for jQuery. It uses the requestAnimationFrame with over 60+ fps. No CSS is needed.

This article was first seen on and republished from csstutorial.io

Basic Usage

This example provides a basic usage example for including tilt.js in your project.

This library requires jQuery and no CSS is needed.

To start using tilt.js you must create an element with a data-tilt attribute. Additionally, you must include the library using an HTML script tag. 

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

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

CDN Links

These are the CDN Cloudflare links to load the library using a CDN.

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

Also available on npm:

You can install the tilt.js javascript library by using the npm install command below:

npm install vanilla-tilt

How to use Tilt.js

Here is a basic HTML document with all the code needed to start using 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>

Recommended Articles