jQuery flip effect with Flippy
First, add Flippy JS in your page. Be sure to have jQuery too !
The Flippy content need to be included in a container, this prevents random perspective effects with CSS :
Simply call flippy() function
If you want to reverse last flip, just use reverse() function.
- 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)
You can attach function to specific events. Add your function like that.
// 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
- The depth parameter has a strange effect when CSS rendering is used
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.
Released under the MIT license