0

I'm implementing an app demo that after a prompt (where it calls back to the server) displays an HTML5 banner at the top of the screen. However, I can't figure out how I can animate the HTML5 banner to transition vertically onto the screen from the top.

The type of transition animation I'm talking about is here http://www.youtube.com/watch?v=xCkg3llsxZI&t=0m8s - although the animation I need is a simple vertical transition without the 3D effect that native iOS push notifications have.

Thanks for any help!

iOShelp
  • 3
  • 3

1 Answers1

0

use CSS3 transforms/transitions. This is a lot faster and better than using javascript or a JS library such as jQuery. see here

If you want more detailed animations, use CSS3 animations. see here

And most importantly, to ensure full cross-plat support of CSS3, install Modernizr and run some shims. see here

EDIT: If you want to trigger the above CSS3 with iOS touch gestures functions, then define those styles inside of the functions.

Community
  • 1
  • 1
Jim22150
  • 511
  • 2
  • 8
  • 22
  • Thanks for the detailed help, really appreciate it! I followed the links you provided and CSS3 certainly seems like the best way to implement the animation, however I can't seem to find any examples relating to vertical transitions (they all seem to be horizontal!) - are there any other resources out there you are aware of? A brief google for a vertical drop down transition revealed nothing... – iOShelp Jan 06 '13 at 21:08
  • Think I've found the transition I'm looking for - should this work in iOS? http://jsfiddle.net/R8zca/4/ – iOShelp Jan 07 '13 at 01:31
  • Look for videos/articles by Michael Palermo, he is a famous CSS3 guru with lots of tutorials/demos on the web discussing new CSS3 syntax and effects. The new iOS is certainty HTML5/CSS3 friendly. You may have to include vendor specific prefixes (-iOS) at the beginning of each style definition for older iOS versions. – Jim22150 Jan 07 '13 at 02:25