QuickFlip is a jQuery plugin I wrote that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back.
jQuery QuickFlip
QuickFlip takes any piece of HTML markup and flips it like a card. It’s simple to implement and the animation is fresh and original.
How QuickFlip works
Normally QuickFlip uses two panels: a front and a back. When a flip occurs, the front panel is split in half with Javascript. The right and left halves slide into one another, and afterwards the opposite occurs with the back panel. While it’s not as smooth as some Flash animation, it all happens so quickly that it really looks like the panel is flipping over.
Putting QuickFlip on your website
Getting QuickFlip to work is a piece of cake; just wrap any content you want to flip in divs with the class “quickFlipPanel”, then wrap those in a div with the class “quickFlip”:
<div class="quickFlip">
<div class="quickFlipPanel">
<p> Front content here </p>
<p class="quickFlipCta">Click to Flip</p>
</div>
<div class="quickFlipPanel">
<p> Back content here </p>
<p class="quickFlipCta">Click to Flip</p>
</div>
</div>
Notice that we have two quickFlipPanels here. You can use any number of .quickFlipPanel’s, from one on up; they are grouped together by divs with the class “quickFlip”.
Also notice that within each panel there is an element with the class “quickFlipCta”. QuickFlip uses this call to action to trigger the flip when clicked. Alternately, you can trigger the flip without .quickFlipCta, using the quickFlip.flip() function (see below).
The QuickFlip files
There are a few files you need to upload to your site and include. Please make sure to adjust these paths as necessary:
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="quickflip.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="quickflip.css" />
Besides the core Javascript and CSS files, there is some additional CSS you will need to write to get QuickFlip working. Since QuickFlip relies on absolute positioning, you need to define a height and width for .quickFlip and .quickFlipPanel.
In general, try not to overwrite any of the styling in quickflip.css (this shouldn’t effect much). You can attach any extra class names to .quickFlipPanel, but don’t attach an ID or inline style. Additionally, avoid attaching margin, padding or positioning to .quickFlipPanel. You can attach any of these to .quickFlip or anything inside .quickFlipPanel if you need to.
Advanced QuickFlip use
Although basic QuickFlip is easy to implement, there are several options that can be customized by advanced users.
First, flip speed can be customized by adjusting the quickFlip.speed array in Javascript. For example:
<script type="text/javascript">
quickFlip.speed = Array( 100 , 90 );
</script>
The first integer in this array is the speed at which the front panel closes and the second integer is the speed at which the back panel opens. You can also set the speed of a particular .quickFlip group:
<script type="text/javascript">
quickFlip.wrappers[0].speed = Array( 120 , 30 );
</script>
This allows you to speed up or slow down any group of panels. Just make sure not to slow it down too much—it’s called ‘QuickFlip’ for a reason, if it’s too slow the illusion turns into a trrrrrrrain wrrrrrrreck.
Triggering the flip manually
Additionally, if you would like to trigger the flip function without the use of .quickFlipCta elements, you can use the quickFlip.flip() function. This function expects three variables; the first two are the indexes of whichever QuickFlip wrapper and panel you’d like to flip, and the third is an option controlling how many times the panel is flipped. For the third variable you should normally use 1 to flip the panel once, but try flipping it more times, or setting the value to -1 to flip continuously.
<script type="text/javascript">
quickFlip.flip(2,0,1);
</script>
This takes the third QuickFlip wrapper, and flips over the first panel to reveal the second (a single flip).
Known bug and a decent workaround
QuickFlip uses Javascript to append duplicates of an element to create the illusion that it is flipping. When this occurs in Internet Explorer 6 and 7, any Javascript events that were attached within that element get removed (click, hover, etc.).
The QuickFlip plugin gets around this internally by reattaching the click event for the .quickFlipCta, so most QuickFlips are unaffected. Additionally this problem only effects Javascript events, not normal <a href=""></a> links. However, if there are extra Javascript events attached within the QuickFlip panels, these events must be put in a function with no arguments, and the name of this function must be passed to quickFlip.reattachEvents. When this is set, it will cause QuickFlip to reattach the events for Internet Explorer users.
Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.
Nice!! Loved the effect!
great plugin, it really provides interactive touch
Yes, very slick– thanks for sharing it!
note to the wayward developer:
– do provide a height/width in css for your panels– without it, it swaps but doesn’t smoothly flip
– front and back should be of the same size
– clip your content with overflow: hidden if you’re unable to reliably stuff your content into a certain size.
Excellent plugin, use it loads on my site.
Good Plug-in, Thanks
Can’t get it to work, getting following error message in FireFox
Error: $ is not defined
Source file: http://sortimentet.intelligentmedia.se/work/js/quickflip.js
Row: 133
Hi Kristoffer,
I’d guess that you aren’t including jQuery.
-jr
Hi Jon,
I have the script working (love it!) but for some reason in IE8 it often results in the message:
“A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer may become unresponsive”.
Has anyone else had this problem? It seems to work perfectly in Chrome and Firefox. The animation pauses 1/3 of the way through i.e. when each side has come in about 1/4 of the way.
Hi Andy,
Quickflip is working fine for me in IE8 with no errors. I think maybe you were using a beta version (your comment was posted before IE8’s official release). Also IE6 and IE7 have been supported by Quickflip since it’s release.
But I always appreciate debugging info like this, let me know if Quickflip continues to give you problems.
Thanks for reading,
jr
Hello, I really like this, but I had to do a hover flip type setup. I tried to take a stab at it and it almost works but thought you would know best on this….
this is what I tried (quickflip.js ~L 121)
attachHandlers : function($the_cta, i, panel) {
//attach flip
$the_cta.bind(“mouseenter”,function(ev){
ev.preventDefault();
quickFlip.flip(i, panel, 1);
});
$the_cta.find(“.mediaLinks”).bind(“mouseleave”,function(ev){
quickFlip.flip(i, panel, 1);
});
},
with a structure of
the test is here…
http://www.digitalbarn.tv/testing-page.html
any ideas would be great… thank you for any help
Cheers
jeremyBass
Hi,
Very nice work, simple to implement… beautiful!
I have an issue, and was wondering if there’s a way to accomplish this: I want to use QuickFlip on a blog that already uses mootools. I also have other scripts running on jquery and mootools and have managed to avoid conflicts by using: var jQuery = jQuery.noConflict(); and replaceing all $ references with jQuery.
what would i have to change in your code to get this working? simply replaceing $ with jQuery doesn’t do the trick… Please don’t be too harsh, i’m not a web developer, i’m a designer 🙂
thanks so much!
Hi Andre,
I’m planning on reworking the QuickFlip plugin a bit in the next couple weeks, and that should solve any jQuery namespacing issues you’re having.
I’ll let you know,
jr
Hello would that happen to include a variable trigger type setup? 🙂 just thought I’d ask …
Cheers
jeremyBass
Yeah Jeremy, I’m planning on making it so you can call quickFlip from any jQuery object, so it’ll be something like:
$( obj ).quickFlip();
I think that should make what you’re doing in the comments above easier.
-jr
Sweet… that’s great… Thanks for the help… always good stuff coming from your way… 😀
Cheers
jeremyBass
wow, wonderful 🙂 i’ll post the link as soon as i get it working 🙂 thanks a lot for the great work!
Hi there, again… quick question: how can i trigger a flip of the elements on page load? this is a nice user clue so they know they can flip elements… i tried creating a function that would do quickFlip.flip(a,b,1) and called it onload but this doesn’t seem to do it… is there any way to do this?
thanks!
Hey there,
Love this, really good work. It perfect for my needs. I had a similar issue to Andy on the 7th March, this was being caused by trying to use this plugin with jQuery 1.3.2, I swapped back to 1.2.6 and its working like a charm.
Just thought I would post and save anyone else having the same issue.
Great work once again, be looking out for the full plugin.
Great plugin, and can be really useful. There are definitely problems with jQuery 1.32 though as Ian said above. It would be really good if this could be updated to sort this out.
Thanks for the great work on this one.
this is a great jquery script!
i will surprise of what user can do with it !
thanks for share
QuickFlip 2 has been released and is way better than the original, check it out here:
http://jonraasch.com/blog/quickflip-2-jquery-plugin
The update solves a number of the problem people mentioned above. The IE8/jQuery 1.3.2 conflict has been fixed, as well as namespacing issues.
It is now way easier to use, since it can be chained from any jQuery selector, and it calculates the dimensions automatically and applies all the CSS it needs through Javascript, so there is no longer any need for a QuickFlip stylesheet.
Finally there is a much easier to use $.quickFlipper() function which makes triggering the flips manually a piece of cake.
Get it here: http://jonraasch.com/blog/quickflip-2-jquery-plugin
Can you edit the code so that it flips on its own (without rollover, or any mouse event) and flips through multiple images? If so, how can I go about doing that?
Hi. Thanks for this plugin!
I’m trying to use flip for mouseover or mouseenter type behavior.
I’d like to have it flip one way with a mouse over, then flip back on a mouseout… but am not sure how to separate the two actions as it’s setup more like a toggle on line 121-127.
I tried a super simple way of just created a new class and manually attaching a flip trigger in order to flip back. But that didn’t quite work.
$(document).ready(function() {
$('.quickFlipBack').mouseout( function() {
quickFlip.flip('.quickFlip', '.quickFlipPanel', 1);
});
});
Here is an example: http://tackysmack.com/flip
Thoughts?
This makes for a pretty rad interactive experience. And I picked your Flip above the others for it’s speed because I was going to use it like this.
Hi,
I am using this quick flip, and i wanted to know if there is a way in which i can remember the side i am looking at ?
What i mean is
I am on side1 – I do a flip to view side 2.
I refresh the page, i should be able to view side 2.
Can i maintain an attribute/hidden id etc to get this to work ?
I have the same question with smd. And also I have another question, how can I link to a specific tab from the same page or another page.
Like linking to a page which has three tabs, how can I access the 3rd tab or second tab in this page.
From the same page it will flip, from another page it will directly go there.
I am using quickflip1.
Thanks
I’m trying to figure out how to create a proper print CSS for quickflip. I’m guessing that the way quickflip works is by positioning one element behind another. So in my print css I would need to use relative positioning to move the back panel below the front panel so that they both show up when printed. Correct?
i use your script with an infinite scroll script. strange thing is that i have to load the quickflip.js and jquery on the additional loaded entries which results in some weird animations since quickflip gets loaded several times :/
anyway to avoid this?
A jquery plugin that flips any piece of HTML like a card.
This is what i was looking for from last two days
It doesn’t run in IE 9. Please check it.