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!
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-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 } |
1 shine value must be true
2 mobile value must be true
tiltChange
event will output the x, y & angle of tilting
This project is licensed under the MIT License © 2018-present Jakub Biesiada