4

I would like to recreate this effect (using jquery) because I think its the coolest thing ever. http://m.madebycanvas.com/things/backflip.html (its by Matthew Farag)

Flip animation

...but I have no idea where to start. Does anyone know how or have any ideas? The author uses scripty2 and the prototype framework and scriptaculous, I believe.

Ideally I could also use a plugin that uses hardware accelerated css transformations with a fallback to jquery's own in unsupported browsers. Please explain how you would do it conceptually if you can.

I'm thinking to animate the button larger somehow to the width of the container it will flip to, then shrink the height anchored in the center to a line and then do the opposite to the panel that will appear.

Diogenes
  • 2,697
  • 3
  • 26
  • 27

2 Answers2

2

It is using Webkit animation. I have made a demo page extracting the essential code from the page you posted: http://jsfiddle.net/42rT4/2/. I hope that's helpful.

Please note though, the author specifically asks you not to copy the code, so you should just learn from it and roll your own.

William Niu
  • 15,798
  • 7
  • 53
  • 93
  • Yeah, I know he doesn't want people to copy it, so I'm trying to figure out how to roll my own using Jquery's built in animation. Ideally I could also use a plugin that uses hardware accelerated css transformations with a fallback to jquery's own in unsupported browsers. – Diogenes Jul 03 '11 at 22:49
  • Could anyone do a quick conceptual walk through of how to do this, jquery style? – Diogenes Jul 03 '11 at 22:49
  • Also, that effect only works once on the page, how do you get it to reset once its done flipping back in. – Diogenes Jul 04 '11 at 20:35
  • I'm marking this as the answer, given how long dead the question is. The goal was to reproduce it in jquery, not wrap the original in a jquery plugin. – Diogenes Jan 03 '13 at 20:22
1

I think that might be using CSS3 animations, check out http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html info is http://line25.com/articles/super-cool-css-flip-effect-with-webkit-animation

(only works in chrome and webkit)

Petah
  • 45,477
  • 28
  • 157
  • 213
  • Given that Chrome has about 10% market share, Safari around 6%, giving Webkit a combined 16% market share roughly, such effects are not really very useful for websites as of yet. – Orbling Jun 05 '11 at 12:35
  • @Orbling, that's irrelevant, what matters is your target audience. Also progressive enhancement is key, as you will notice, those pages still work in other browsers, just with out the fancy animation. – Petah Jun 05 '11 at 21:12
  • On the web, your target audience very rarely definitely has a specific browser. Unless you have a corporate intranet or something, where the browser is known - then it is usual practice to ensure cross browser functionality. As long as there is a fallback, then fine - but seems a lot of effort to go to for 16% of the target audience. – Orbling Jun 05 '11 at 21:54
  • I stumbled across this flip effect before, but couldn't see how to apply it to create the same effect where the panel flips and comes out of the button. – Diogenes Jul 03 '11 at 22:51