Parallax Hover Tilt Effect With jQuery And CSS3 - universal-tilt.js

Parallax Hover Tilt Effect With jQuery And CSS3 - universal-tilt.js

universal-tilt.js is a jQuery plugin to create performant, interactive parallax tilt effects that react to mouse movement and touch events. Supports both desktop and mobile devices. Based onĀ requestAnimationFrame API and CSS3 transform/perspective/transition properties. Also supports multi-layer elements.

See also:

Basic usage:

1. Load the jQuery universal-tilt.js script after the latest jQuery library (slim build).

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

2. Initialize the plugin and we're ready to go.


3. Add the CSS class tilt to the target element and config the Parallax Hover Tilt Effect with 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" 

4. Add the parallax effect to the inner element.

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

5. You can also config the Parallax Hover Tilt Effect in the JavaScript as these:

  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

This awesome jQuery plugin is developed by JB1905. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 28.01.2018
  • Source