Flip effect using jquery

by  
Share:
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.

View Demo

To create a flip effect it just takes 3 steps

First, attach the library files to the page.

<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
	<script src="js/excanvas.min.js" type="text/javascript"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.flippy.min.js"></script>

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.
<div class="thecontainer">
    <div class="flipbox">
        <span>My Content goes here </span>
    </div>
</div>

Third, bind the flip effect with some event.
 $("#btn-left").on("click",function(e){
        $(".flipbox").flippy({
            color_target: "red",
            direction: "left",
            duration: "750",
            verso: "<h1>Roses are Red.</h1>",
         });
         e.preventDefault();
});

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

 

View Demo

Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

msminsu on

When hover back-face the card,
and How do I get the front to work when I’m hover-out?

Reply
Shahrukh Khan on

use the last animation function

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.