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.
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
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:
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
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:
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.
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.
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.reattachEvents. When this is set, it will cause QuickFlip to reattach the events for Internet Explorer users.