Parallax Hover Tilt Effect In Vanilla JavaScript – universal-tilt.js

Category: Animation , Javascript , Recommended | June 17, 2019
Views Total:1,894 views
Official Page:Go to website
Last Update:June 17, 2019


Parallax Hover Tilt Effect In Vanilla JavaScript – universal-tilt.js


This is the vanilla JavaScript version of the universal-tilt.js jQuery plugin that makes it easy to implement interactive, touch-enabled parallax tilt effect on single or multiple elements you specify.

How to use it:

Create an element where you want to apply the parallax tilt effect.

<div class="tilt">

Config the effect using the following data attributes:

  • data-shadow: add shadow to element
  • data-shine: add shine to element
  • data-shine-opacity: opacity level
  • data-scale: add scale to element
  • data-disabled: disable X- or Y-axis of your element
  • data-reverse: reverse all elements
  • data-position-base: set base position
  • data-reset: disable reset single element
<div class="tilt" 

Apply the parallax effect to the inner content.

h2 {
  -webkit-transform: translateZ(80px);
  transform: translateZ(80px);

Load the main JavaScript file universal-tilt.js at the end of the html document.

<script src="dist/universal-tilt.js"></script>

Initialize the universal-tilt.js and done.

var myTilts = document.querySelectorAll('.tilt');
var instance = new UniversalTilt(myTilts);

You can also onfig the Hover Tilt Effect with the following options.

var instance = new UniversalTilt(myTilts,{
    position-base: 'element', // element or window
    reset: true,
    shadow: false,
    shadow-save: false,
    shine: false,
    shine-opacity: 0,
    shine-save: false,
    max: 35,
    perspective: 1000,
    scale: 1.0,
    disabled: null,
    reverse: false,
    animation: true


v2.0.6 (06/17/2019)

  • Update

v1.1.0 (07/16/2018)

  • switched from Gulp to Webpack
  • updated Babel to v7
  • only 2 dist version
  • changed main file from universal-tilt.js to universal-tilt.min.js
  • moved demo to gh-pages branch

You Might Be Interested In:

Leave a Reply