Interactive Parallax Tilt Effect Using jQuery - Tilt.js

File Size: 61.7 KB
Views Total: 10194
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Interactive Parallax Tilt Effect Using jQuery - Tilt.js

Tilt.js is a tiny jQuery plugin which applies tvOS poster-like, multi-layer parallax tilt effect to any HTML elements using requestAnimationFrame and CSS3 3D transforms.

Vanilla JS Version available here.

See also:


# yarn
yarn add tilt.js

# npm
npm install --save tilt.js

How to use it:

1. Install the tilt.js plugin via package managers or directly include the JavaScript file on the webpage. Note that the plugin requires the latest version of jQuery library installed.

<script src="//"></script>
<script src="tilt.jquery.js"></script>

2. Adding the 'data-tilt' attribute to the target element will initialize the plugin automatically.

<div data-tilt></div>

3. Create a multi-layer parallax effect that responds to mouse move.

<div class="c-test js-tilt">
  <div class="c-test-inner"></div>
const element = $('.js-tilt').tilt();
.c-test {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightgrey;
  transform-style: preserve-3d;

.c-test-inner {
  will-change: transform;
  transition: .15s;
  position: absolute;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  background-color: red;
  transform: translateZ(100px) scale(0.5);

4. All configuration options which can be passed via JavaScript or HTML data attributes as shown below:

<span class="js-tilt" 
      Data attributes
const element = $('.js-tilt').tilt({
      maxTilt: 20,
      perspective: 300,
      easing: 'cubic-bezier(.03,.98,.52,.99)',
      scale: '1',
      speed: '400',
      transition: true,
      disableAxis: null,
      axis: null,
      reset: true,
      glare: false,
      maxGlare: 1

5. API methods:

// Destroy;

// Get values; // returns [{},{},etc..]

// Reset;

Change log:


  • v1.2.1: Moved pointer-events to the wrapper element so elements inside can be interacted with


  • v1.2.0: Added a new disableAxis setting for maximum clarity


  • v1.1.21: Added umd wrapper


  • v1.1.19


  • Fixed duplicate style entry


  • Set glare's opacity to 0 when not hovering


  • v1.1.13

This awesome jQuery plugin is developed by gijsroge. For more Advanced Usages, please check the demo page or visit the official website.