2

I'm trying to use Jquery/HTML/CSS to create an animation like Flipboard dashboard imageflip. See the demo here http://www.youtube.com/watch?v=w1fTI7oYfbI .

The person who implemented the above animation didn't post any codes.

Can anyone suggest something on this?

Thanks in advance.

  • I don't think that's achievable without **CSS3** transformations -- are you okay with that? – Chris Aug 29 '12 at 10:03
  • This example may help you: http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/ – LeBen Aug 29 '12 at 10:09
  • Ya it's ok. If I have to use CSS3. Could you please tell me what you know about this? –  Aug 29 '12 at 10:12
  • Thanks LeBen, I already referred to that resource. This concept is quite different from Flipboard flip. That is a bookflip. He uses two separate images and flip one on other, but in order to achieve Flipboard effect we have to spit the image into two halves and animate the top part. I dont know how to split the image. See the workflow http://openaphid.github.com/images/flip-75-degree.jpg and http://openaphid.github.com/blog/2012/05/21/how-to-implement-flipboard-animation-on-android/ –  Aug 29 '12 at 10:16

1 Answers1

1

You need CSS transform to create animations like this. A similar demo (with code) is found at: http://www.markandey.com/2011/12/flipboard-like-ui-on-iphone-safari.html

note, the example only uses the webkit prefix, make sure to use other prefixes too, to support multiple browsers. All about transform you can find at: http://www.w3schools.com/cssref/css3_pr_transform.asp

Hope you got enough to get you started now.

Maurice
  • 171
  • 1
  • 8
  • Thanks a lot Maurice. This helps me a lot. With the prefixs it's working with the Firefox too. I'm trying to change this into a auto flipping animation. I thing i need to mess with orientation(), start, drag and stop functions. Do you have any suggestions on this? –  Aug 30 '12 at 03:58