Animation with HTML5

Aidan Feldman

The Old
y SVG y Flash y Silverlight y Java applets

The Trouble With Flash
y Not lightweight y Not supported on mobile y No native hardware acceleration

Options
2D
y CSS3 y Canvas

3D
y CSS3 y WebGL

CSS3 Animations
y Examples (WebKit):
http://www.webdesignerwall.com/trends/47-amazingcss3-animation-demos/

HTML5 Canvas
y Manipulated w/ Javascript y Flash CS5 ±> Canvas y Support: Firefox, Chrome, Safari, Opera y COMING IN IE9!

Canvas Examples
y iGrapher(Gecko): http://igrapher.com/

Processing.js
y Processing: subset of Java y Uses Canvas element

http://processingjs.org/

WebGL
y Google¶s O3D: plugin gone JS library y Support: Firefox 4 Beta, WebKitnightlies, Chromium

WebGL Examples
y Waves (WebKit): http://www.ibiblio.org/enotes/webgl/wave.html

y Canvascape(Gecko):
http://www.benjoffe.com/code/demos/canvascape/textu res

y Quake (WebKit): http://code.google.com/p/quake2-gwtport/

Sign up to vote on this title
UsefulNot useful