universal-tilt.js

June 4, 2019 · View on GitHub

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!

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: `/(Firefox\|iPad)/`
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¹	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)
speed	number	`300`	Transition speed (ms)	e.g: `500`

Callbacks

Name	Description	Available options
onDestroy	Callback on plugin destroy	`el => { /* code */ }`
onDeviceMove²	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 */ }`

¹ shine value must be true
² only for devices supported device motion

Event

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