Tilt Animation | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Tilt Animation

##### Parallax hover tilt effect

###### The most basic usage:

- `<script src="tilt.jquery.js"></script>`
- Mark your elements with`<span data-tilt"></span>`

##### Parallax hover tilt effect

###### How to Use:

1. A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery.
2. Add `transform-style: preserve-3d` to your tilt element.
3. Add `transform: translateZ(20px)` to your inner elements that have to pop out.

##### Glare effect:

###### How to Use:

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:

###### How to Use:

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

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

##### Scale on hover

###### How to Use:

Setting this option will scale tilt element on hover.

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

##### Disable Y axis

###### The most basic usage:

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

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

##### Disable X axis

###### The most basic usage:

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

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