universal-tilt.js
v2.0.6
Published
Parallax tilt effect library
Downloads
1,878
Maintainers
Readme
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
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-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)
speed | number | 300
| Transition speed (ms) | e.g: 500
Callbacks
Name | Description | Available options
-|-|-
onDestroy | Callback on plugin destroy | el => { /* code */ }
onDeviceMove2 | 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
License
This project is licensed under the MIT License © 2018-present Jakub Biesiada