May 29, 2009

WorkAtPlay.com How It Was Made: The Flip and Scale Effect

admin

There has been great reception to the Work at Play website design and effects. We have received several emails from intrepid geeks wondering how we pulled off all that cool jQuery eye-candy. After writing a few of these "how it was made" emails I think a blog post is in order. Without further delay, here is the behind the scenes story on WorkAtPlay.com!

The Flip and Scale Effect

On the WorkAtPlay.com homepage we use the jQuery Flip! plug-in in combination with some custom animations to give the "Flip & Scale" effect. This is a little more complicated than one might think, and deserves some explanation:

• User clicks on a work sample tile image.
• The click is caught using a standard jQuery $(elem).click() handler.
• Due to how the Flip! plug-in works it isn't possible to just flip the work sample tile directly. Instead we replace the tile with an empty div of the same colour and perform the flip on that new div. We call the new empty div the "flip_side" because it will actually become the flip-side of the work sample tile.
• The flip_side div is placed using absolute positioning directly on top of the work sample tile. The work sample tile is then hidden with CSS to keep it out of the way.
• Now, finally, the Flip! plug-in is triggered on the flip_side div.
• When the flip_side div is finished flipping the Flip! onEnd call-back is triggered. We use the onEnd call-back to insert the content for the work sample's "flipped side". This content is cleverly ready and waiting inside a hidden part of the original work sample tile (view source on the WorkAtPlay.com home-page to see for yourself). Oh, we insert the content with a basic $(flip_side).html(flip_content.html())
• Ok, so far we've got a div called flip_side that contains the right content. But it's still really small and the content is all scrunched up. How do we make it bigger? The scale effect is solved by the jQuery $(elem).animate() method plus some handy CSS positioning
• The tricky part of the scale effect is figuring out how big it should scale and to what X and Y pixel co-ordinates it should move to. This is accomplished by the following formulas:
  • flipped_side.top = $('#work-page .wrapper').offset().top
  • flipped_side.left = $('#work-page .wrapper').offset().left
  • flipped_side.width = $('#work-page .wrapper').width() + 1
  • flipped_side.height = Math.ceil($('.work-sample').length / NUM_WORK_SAMPLE_COLS) * $('.work-sample:first').height()
  jQuery handles the actual animation for us, awesome!