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:

• Apple TV Inspired Interactive Parallax Effect With jQuery And CSS3
• Apple TV Poster Parallax Effect with jQuery and CSS3 - maximusParallaximus
• tvOS Inspired Interactive Parallax Effect with jQuery and CSS3 - Media Poster
• tvOS Hover Parallax Effect With jQuery and CSS3 - TVParallax

Installation:

# 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="//code.jquery.com/jquery-3.1.1.slim.min.js"></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>
</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-tilt-glare="true" 
      data-tilt-maxGlare=".1"
      ...
      >
      Data attributes
</span>

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
element.tilt.destroy.call(tilt);

// Get values
element.tilt.getValues.call(tilt); // returns [{},{},etc..]

// Reset
element.tilt.reset.call(tilt);

Change log:

2017-11-09

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

2017-09-08

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

2017-05-13

• v1.1.21: Added umd wrapper

2017-05-02

• v1.1.19

2017-04-13

• Fixed duplicate style entry

2017-03-23

• Set glare's opacity to 0 when not hovering

2017-02-13

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