How to Create a Flip Effect Using jquery

Jquery has really changed the way people write javascript. We can make great animation effect using jquery. In this tutorial I will show you how to create flip effect using jquery. You can use this effect for highlighting your featured content on your website.

To create a flip effect it just takes 3 steps

First, attach the library files to the page.

Second, the flippy content needs to be wrapped within a container otherwise some other random effect will show up. You can add any class to the container.

Third, bind the flip effect with some event.


There are lots of option that will be more than needful to customize as per your liking. Lets look at some of them:

  • color_target – the background color for the flipbox.
  • direction – which way to flip. top, left right, bottom.
  • duration – How long the flip effect is during in ms (default : 300)
  • verso -The content that will be displayed inside the flipbox.
  • light : You can adjust light and shadow intensity (default : 60)
  • noCSS : You can force Flippy to NOT use CSS3 properties even if the browser support it (default : false)

The library also provide some callback function so you can use them for firing some queries or other events in the meantime.

  • onStart – The function triggered before the animation start.
  • onMidway : The function triggered at half animation.
  • onAnimation : The function triggered each time the Flippy is refreshed.
  • onFinish : The function triggered after the animation finish.
  • onReverseStart : The function triggered before the reverse animation start.
  • onRevereseMidway : The function triggered at half of reverse animation.
  • onReverseAnimation : The function triggered each time the Flippy is refreshed while reversing.
  • onReverseFinish : The function triggered after the reverse animation finish



Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *