Awesome

universal-tilt.js

About

JavaScript & jQuery elements movement library based on:

Tilt.js by Gijs Rogé and vanilla-tilt.js by Șandor Sergiu

universal-tilt.js contains additional functions for mobile devices with gyroscope, new Position Base option and more!

Demo

See plugin in action

React plugin

If you use React, install component with the implementation of the universal-tilt.js library! More here

How to Install

First, install the library in your project by npm:

$ npm install universal-tilt.js

Or Yarn:

$ yarn add universal-tilt.js

You can also connect script via one of CDNs: bundle.run: https://bundle.run/universal-tilt.js jsDelivr: https://cdn.jsdelivr.net/npm/universal-tilt.js/ unpkg: https://unpkg.com/universal-tilt.js/

Getting Started

Connect libary with project using script tag in HTML:

<script src="/path/to/universal-tilt.js"></script>

ES6 import:

import UniversalTilt from 'universal-tilt.js';

Or CommonJS:

const UniversalTilt = require('universal-tilt.js');

Next use library with:

• Vanilla JavaScript e.g:

const elems = document.querySelectorAll('.tilt');

const tilt = UniversalTilt.init({
  elements: elems,
  settings: {
    // options...
  },
  callbacks: {
    // callbacks...
  }
});

• or jQuery e.g:

Connect jQuery in HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Or include via command line and CommonJS

$ npm install jquery
$ yarn add jquery
$ bower install jquery

const jQuery = require('jquery');

And call plugin on element

$('.tilt').universalTilt({
  settings: {
    // options...
  },
  callbacks: {
    // callbacks...
  }
});

• Plugin supports autoinit

To use it, add data-tilt to html element e.g:

<div data-tilt></div>

Methods

• Destroy method

elems.universalTilt.destroy();

• Get values method

elems.universalTilt.getValues();

• Reset method

elems.universalTilt.reset();

Options

Settings

Name	Type	Default	Description	Available options
base	string	`element`	The surface from which the location of the mouse is captured	`element` or `window`
disabled	string	`null`	Disable axis	`x` or `y`
easing	string	`cubic-bezier(.03, .98, .52, .99)`	Transition easing	`cubic-bezier`/`ease`/`linear`/etc.
exclude	RegExp	`null`	Disable tilt effect on selected user agents	e.g: <code>/(Firefox\|iPad)/</code>
max	number	`35`	Max tilt value	e.g: `28`
perspective	number	`1000`	Tilt effect perspective	e.g: `700`
reset	boolean	`true`	Enable/disable element position reset after mouseout	`true` (enable), `false` (disable)
reverse	boolean	`false`	Reverse tilt effect directory	`true` (reverse directory), `false` (standard directory)
scale	number	`1.0`	Element scale on mouseover	`0.9`/`1.3`/etc.
shine	boolean	`false`	Add/remove shine effect on mouseover	`true` (add), `false` (remove)
shine-opacity<sup>1</sup>	number	`0`	Add/remove shine effect on mouseover	values >= `0` and <= `1`
shine-save<sup>1</sup>	boolean	`false`	Save/reset shine effect on mouseout	`true` (save), `false` (reset)
speed	number	`300`	Transition speed (ms)	e.g: `500`

Callbacks

Name	Description	Available options
onDestroy	Callback on plugin destroy	`el => { /* code */ }`
onDeviceMove<sup>2</sup>	Callback on device move	`el => { /* code */ }`
onInit	Callback on plugin init	`el => { /* code */ }`
onMouseEnter	Callback on mouse enter	`el => { /* code */ }`
onMouseLeave	Callback on mouse leave	`el => { /* code */ }`
onMouseMove	Callback on mouse move	`el => { /* code */ }`

1 shine value must be true 2 only for devices supported device motion

Event

tiltChange event will output the x, y & angle of tilting