universal-tilt.js

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

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

At the beginning install the library in Your project via npm or Yarn:

$ npm install universal-tilt.js
$ yarn add universal-tilt.js

Connect using script tag in HTML:

<script src="/directory/to/library/folder/universal-tilt.js"></script>

Or CommonJS/ES6 import:

const UniversalTilt = require('universal-tilt.js'); // CommonJS
import UniversalTilt from 'universal-tilt.js'; // ES6

Next use library with:

• Vanilla JavaScript e.g:

const elems = document.querySelectorAll('.tilt');
const universalTilt = new UniversalTilt(elems, {
  // options...
});

• or jQuery e.g:

Connect jQuery in HTML

<script src="https://code.jquery.com/jquery-3.3.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({
  // options...
});

• Plugin supports autoinit

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

<div data-tilt></div>

Name	Type	Default	Description	Available options
position-base	string	`element`	The surface from which the location of the mouse is captured	`element` or `window`
reset	boolean	`true`	Enable/disable element position reset after mouseout	`true` (enable), `false` (disable)
mobile	boolean	`true`	Enable/disable tilt effect on mobile devices with gyroscope (tilt effect on touch is always enabled)	`true` (enable), `false` (disable)
shine	boolean	`false`	Add/remove shine effect on mouseover	`true` (add), `false` (remove)
shine-opacity¹	number	`0`	Add/remove shine effect on mouseover	values >= `0` and <= `1`
shine-save¹	boolean	`false`	Save/reset shine effect on mouseout	`true` (save), `false` (reset)
max	number	`35`	Max tilt value	e.g: `28`
perspective	number	`1000`	Tilt effect perspective	e.g: `700`
scale	number	`1.0`	Element scale on mouseover	`0.9`/`1.3`/etc.
disabled	string	`null`	Disable axis	`x` or `y`
reverse	boolean	`false`	Reverse tilt effect directory	`true` (reverse directory), `false` (standard directory)
speed	number	`300`	Transition speed (ms)	e.g: `500`
easing	string	`cubic-bezier(.03, .98, .52, .99)`	Transition easing	`cubic-bezier`/`ease`/`linear`/etc.
onMouseEnter	function	`null`	Call function on mouse enter	`el => { // code }`
onMouseMove	function	`null`	Call function on mouse move	`el => { // code }`
onMouseLeave	function	`null`	Call function on mouse leave	`el => { // code }`
onDeviceMove²	function	`null`	Call function on device move	`el => { // code }`

¹ shine value must be true
² mobile value must be true

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