universal-tilt.js icon indicating copy to clipboard operation
universal-tilt.js copied to clipboard

Published 20 hours ago β€’ verified publisher icon universal-tilt-js
β†’

Metadata

πŸŽ† Parallax tilt effect library

universal-tilt.js

NPM version NPM downloads

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

See plugin in action

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

← Metadata

131
Stars
14
Forks
Watchers

Owner

verified publisher icon universal-tilt-js

Metadata

πŸŽ† Parallax tilt effect library

Back