Geek Answers Handbook

How to use jquery to animate back panel?

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

Flip animation

... but I have no idea where to start. Does anyone know how or have ideas? I believe that the author uses scripty2 and the prototype structure and script.

Ideally, I could also use a plugin that uses hardware accelerated css conversions with a return to jquery belonging to unsupported browsers. Please explain how you will do this conceptually, if you can.

I am thinking about animating a button as large as possible to the width of the container it will be flipped to, and then reduce the height fixed in the center to a line, and then make the opposite panel that appears.

+4
source share
2 answers

Uses Webkit animation. I made a demo page by extracting the main code from the page you posted: http://jsfiddle.net/42rT4/2/ . Hope this helps.

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

+2
source

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

(works only in chrome and webkit)

+1
source

More articles:


All Articles