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!

See plugin in action

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

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/

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>

• Destroy method

elems.universalTilt.destroy();

• Get values method

elems.universalTilt.getValues();

• Reset method

elems.universalTilt.reset();

¹ shine value must be true
² only for devices supported device motion

tiltChange event will output the x, y & angle of tilting

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