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">
  <h2>CSSScript.com</h2>
</div>

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" 
     data-shadow="true" 
     data-shine="true" 
     data-shine-opacity="0.5">
     <h2>CSSScript.com</h2>
</div>

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
});

Changelog:

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