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

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.

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">
   <meta charset="UTF-8">
   <title>CSS Tutorial</title>

<img data-tilt data-tilt-max="20" data-tilt-speed="400" data-tilt-perspective="500" src="" class="js-tilt">

    scale: 1.2

<script src=""></script>


Recommended Articles