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.jsOr Yarn:
$ yarn add universal-tilt.jsYou 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 jqueryconst 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
