universal-tilt.js

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

See plugin in action

React.js plugin

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

How to Install

At the beginning connect the library with Your project:

• using script tag in HTML:

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

• or via command line:

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

Getting Started

If you added library via package manager use 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>

Options

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-opacity1	number	0	Add/remove shine effect on mouseover	values >= 0 and <= 1
shine-save1	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 }
onDeviceMove2	function	null	Call function on device move	el => { // code }

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

Event

tiltChange event will output the x & y of tilting

License

This project is licensed under the MIT License © 2018-present Jakub Biesiada