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);

Destroy Re-enable

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"