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

Category: Animation , Javascript , Recommended | July 16, 2018
Author: JB1905
Views Total: 871
Official Page: Go to website
Last Update: July 16, 2018
License: MIT

Preview:

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

Description:

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:

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

Leave a Reply