Web Animation Buffet
description
Transcript of Web Animation Buffet
![Page 1: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/1.jpg)
Web Animation BuffetOptions for Animating on the Web
Joshua Sager g Loop Pittsburgh Jan. 18, 2011g
http://joshsagermedia.com@joshager
1
![Page 2: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/2.jpg)
Flash was the only disco in town
2
![Page 3: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/3.jpg)
Then jQuery joined the fun
3
![Page 4: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/4.jpg)
HTML5 & CCS3
Came Along
4
![Page 5: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/5.jpg)
The industry
went bananas
5
![Page 6: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/6.jpg)
Today’s web is sporting a
new look
6
![Page 7: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/7.jpg)
Navigating these technologies can
be a BIG challenge
7
![Page 8: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/8.jpg)
It’s about the idea. Technology should
be invisible.
8
![Page 9: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/9.jpg)
What are people making?
9
![Page 10: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/10.jpg)
Dan Mallhttp://miamiadschool.danielmall.com/pop527/
10
![Page 11: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/11.jpg)
Polaroids with CSShttp://www.zurb.com/playground/css3-polaroids
11
![Page 12: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/12.jpg)
CSS & jQuery Clcokhttp://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html
12
![Page 13: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/13.jpg)
DJ Herohttp://demo.marcofolio.net/jquery_dj/
13
![Page 14: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/14.jpg)
CSS3 Spider-Manhttp://www.optimum7.com/css3-man/animation.html
14
![Page 15: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/15.jpg)
Image Transitionshttp://www.nikesh.me/demo/image-effect.html
15
![Page 16: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/16.jpg)
Nike Better Worldhttp://nikebetterworld.com/index
16
![Page 17: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/17.jpg)
Nike Snowboardinghttp://www.nikesnowboarding.com/
17
![Page 18: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/18.jpg)
Photo Galleryhttp://gughifassino.it/#/all/
18
![Page 19: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/19.jpg)
3D Cubehttp://www.paulrhayes.com/experiments/cube-3d/index.html
19
![Page 20: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/20.jpg)
Our Options
Flash jQuery SenchaCSS3
20
![Page 21: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/21.jpg)
Flashdemo
21
![Page 22: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/22.jpg)
jQuery http://labs.joshsagermedia.com/basic-jquery
http://labs.joshsagermedia.com/basic-jquery/source.zip
22
![Page 23: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/23.jpg)
CSS3http://labs.joshsagermedia.com/css3
http://labs.joshsagermedia.com/css3/source.zip
*These demos should be viewed in chrome or safari
23
![Page 24: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/24.jpg)
Senchahttp://labs.joshsagermedia.com/css3/sencha.html
http://labs.joshsagermedia.com/css3/sencha-source.zip
*These demos should be viewed in chrome or safari
24
![Page 25: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/25.jpg)
Lets Compare
25
![Page 26: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/26.jpg)
FLASH JQUERY CSS3 SENCHA
IE (LEGACY)
IE 9
FIREFOX
CHROME
SAFARI
OPERA
IPAD/IPHONE * * *
ANDROID **
26
![Page 27: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/27.jpg)
Takeaways
27
![Page 28: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/28.jpg)
Become a TechnologyWrangler
28
![Page 29: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/29.jpg)
Technologies can work together
29
![Page 30: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/30.jpg)
It’s about the idea. Technology should
be invisible.
30
![Page 31: Web Animation Buffet](https://reader034.fdocuments.net/reader034/viewer/2022042601/548d29d7b479590d2b8b49a6/html5/thumbnails/31.jpg)
"ank you!
Joshua Sager g Loop Pittsburgh Jan. 18, 2011g
http://joshsagermedia.com
!ese wonderful illustrations were created by the lovely and talented Rachel Arnold Sager (h"p://52ills.com)
31