Tilt Animation

  • 3
    Notifications
    • user

      Emay Walter liked your post

      10 minutes ago
    • user

      Allie Gratershared your post

      5 hours ago
    • user

      Colin Sikcommented on your post

      yesterday
    • Check all
  • 2
    user
    Jane Cooper

    active

    • user

      Hello.how are you?

    • user

      Hi, i'm fine.what about you?

    • user

      I am facing js issue can you help me?

    • user

      Sure, i will help you.

  • 2
    Cart
    empty
    Oops! Your cart empty!!!
  • profile

    Wade Warren

    UI Designer
user

Wade Warren

UI Designer

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