Download
User Rating: 0/5 ( 0 votes)
Flippy is a cross-browser flip effect plugin for jQuery which allows you to flip whatever html element you want. It now supports rgba colors
Features
-
Use CSS3 transform option when the browser supports it
-
Animate multiple element simultaneously
-
Revert the last flip animation with $('#myElement').flippyReverse();
-
Multiple callback on start, half way, during the animation and when finished
-
Flip content without breaking event bindings
Cross browser ?
The Flippy plugin works fine for every modern web browser except Internet Explorer 8 and before (of course…). In this demo I used the excanvas.js file to allow the use of canvas in older IE versions. You can find it here.
Source: blog.guilhemmarty.com
1. INCLUDE JS FILES
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flippy.js"></script>
2. HTML
<div class="flipbox-container">
<div class="flipbox">
<span>Hello !</span>
</div>
</div>
3. JAVASCRIPT
$(".flipbox").flippy({
color_target: "red",
duration: "500",
verso: "woohoo"
});
If you want to reverse last flip, just use reverse() function
$(".flipbox").flippyReverse();
4. OPTIONS
-
color_target : The targeted background color. (ex.: ‘aliceblue’, ‘#f0f8ff’ or rgba(33,133,197,.3) | default: ‘white’)
-
recto : The content to show after a revert() action (default : the original content)
-
verso : The content to show after the flip effect
-
direction : The direction of the flip effect (‘RIGHT’, ‘LEFT’, ‘BOTTOM’, ‘TOP’ | default : ‘LEFT’)
-
duration : How long the flip effect is during in ms (default : 300)
-
depth : You can adjust the perspective effect (default : 0.12)
-
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)
5. METHODS
You can attach function to specific events. Add your function like that.
$(".flipbox").flippy({
color_target: "red",
duration: "500",
verso: "woohoo",
onStart: function(){
// Your code here
}
});
-
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