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}

$('.js-tilt').tilt({
    glare: true,
    maxGlare: .5
})

Keep floating:

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

$('.js-tilt').tilt({
    reset: false
})

Scale on hover

Setting this option will scale tilt element on hover.

$('.js-tilt').tilt({
    scale: 1.2
})

Disable Y axis

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

$('.js-tilt').tilt({
    axis: x
})

Disable X axis

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

$('.js-tilt').tilt({
    axis: y
})

Destroy method

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

const tilt = $('.js-tilt').tilt()
tilt.methods.destroy.call(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){});

    Features

    • Options can be passed with thetilt()function.

      $('.js-tilt').tilt({
    option: value,
    option: value,
});

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