Interactive Parallax Tilt Effect Using jQuery - Tilt.js

File Size: 61.7 KB
Views Total: 10362
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:

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.