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

universal-tilt.js is a JavaScript 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.

Also can be used as a vanilla JavaScript plugin.

See also:

• Apple TV Inspired Interactive Parallax Effect With jQuery And CSS3
• Interactive Parallax Tilt Effect Using jQuery - Tilt.js
• Apple TV Poster Parallax Effect with jQuery and CSS3 - maximusParallaximus
• tvOS Inspired Interactive Parallax Effect with jQuery and CSS3 - Media Poster
• tvOS Hover Parallax Effect With jQuery and CSS3 - TVParallax

Installation:

# NPM
$ npm install universal-tilt.js --save

Basic usage:

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="dist/universal-tilt.js"></script>
// CDN
<script src="https://unpkg.com/universal-tilt.js/"></script>

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

<!-- auto init -->
<div data-tilt></div>

$(function(){

  $('.tilt').UniversalTilt();

});

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" 
     data-shadow="true" 
     data-shine="true" 
     data-shine-opacity="0.5">
     <h1>jQueryScript.Net</h1>
</div>

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:

$('.tilt').UniversalTilt({

  settings: {

    // element or window
    base: 'element', 

    // allow/disable element position reset after mouseout
    reset: true, 

    // enable/disable tilt effect on mobile devices
    mobile: true, 

    // add/remove shine effect on mouseover
    shine: false, 

    // set shine opacity (0-1)
    shine-opacity: 0, 

    // save/reset shine effect on mouseout
    shine-save: false, 

    // max tilt value
    max: 35, 

    // tilt effect perspective
    perspective: 1000, 

    // element scale on mouseover
    scale: 1.0, 

    // disable axis (X or Y)
    disabled: null, 

    // reverse tilt effect directory
    reverse: false, 

    // transition speed
    speed: 300, 

    // transition easing
    easing: 'cubic-bezier(.03,.98,.52,.99)',

    // disable on selected user agents
    // /(iPod|iPhone|iPad|Android)/
    exclude: null
    
  }
  
});

6. Callback functions available.

$('.tilt').UniversalTilt({
  
  callbacks: {

    // call function on mouse enter
    onMouseEnter: null, 

    // call function on mouse move
    onMouseMove: null, 

    // call function on mouse leave
    onMouseLeave: null, 

    // call function on device move
    onDeviceMove: null 

  }

});

Changelog:

v2.0.6 (2019-06-18)

• platform is now built-in

v2.0.4/5 (2019-06-05)

• fixed exclude option incorrect behavior

v2.0.3 (2019-03-22)

• fixed CDN undefined bug

v2.0.0 (2019-03-06)

• splitted options prop into settings and methods
• renamed option position-base to base
• bugfix

v1.1.1 (2018-10-06)

• Update dependency.

v1.1.0 (2018-07-16)

• 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

v1.0.6 (2018-07-08)

• Internal updates & improvements

v1.0.6 (2018-05-01)

• improved events performance

v1.0.4 (2018-04-14)

• fixed bug with jQuery and Node.js compatibility

v1.0.1 (2018-04-09)

• added mobile option (enable or disable tilt effect on mobile devices)

v1.0.0 beta 3 (2018-03-29)

• removed shadow options
• added callbacks on mouse enter, move, leave and device move

v1.0.0 beta 2 (2018-03-20)

• code cleaned up
• added autoinit
• fixed performance of shine effect
• fixed performance on mobile devices

v1.0.0 beta 1 (2018-03-04)

• npm added
• AMD & CommonJS support added
• redesigned demo page (new header view, dark theme)
• updated README.md
• added shadow-color option
• renamed jQuery plugin from UniversalTilt() to universalTilt()

 

---

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