A tiny requestAnimationFrame powered 60+fps
lightweight parallax hover tilt effect for jQuery.

Notices: Star

The most basic usage:

  1. Add <script src="tilt.jquery.js"></script> right before the closing </body> tag
  2. Mark your elements with <span data-tilt></span>

Creating a parallax effect

  1. Add transform-style: preserve-3d to your tilt element.
  2. Add a transform: translateZ(20px) to your inner elements that have to pop out.

Glare effect:

Setting this option will enable a glare effect. You can tweak the glare value with {'maxGlare': .5}

    glare: true,
    maxGlare: .5

Keep floating:

Setting this option will not reset the tilt element when the user mouse leaves the element.

    reset: false

Scale on hover

Setting this option will scale tilt element on hover.

    scale: 1.2

Disable Y axis

Setting this option will disable the Y-Axis on the tilt element.

    axis: x

Disable X axis

Setting this option will disable the X-Axis on the tilt element.

    axis: y

Destroy method

Call this method will remove all events and classes from the tilt element.

const tilt = $('.js-tilt').tilt()

On change event

The on change event wil output the x,y & percentages of tilting.

const tilt = $('.js-tilt').tilt()
tilt.on('change', function(e, transforms){});


    • Options can be passed with thetilt()function.

          option: value,
          option: value,
    • All options are configurable trough data-attributes. data-tilt-<option name>="value"