Web Animation BuffetOptions for Animating on the Web

Joshua Sager g Loop Pittsburgh Jan. 18, 2011g

http://joshsagermedia.com@joshager

1

Flash was the only disco in town

2

Then jQuery joined the fun

3

HTML5 & CCS3

Came Along

4

The industry

went bananas

5

Today’s web is sporting a

new look

6

Navigating these technologies can

be a BIG challenge

7

It’s about the idea. Technology should

be invisible.

8

What are people making?

9

Dan Mallhttp://miamiadschool.danielmall.com/pop527/

10

Polaroids with CSShttp://www.zurb.com/playground/css3-polaroids

11

CSS & jQuery Clcokhttp://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html

12

DJ Herohttp://demo.marcofolio.net/jquery_dj/

13

CSS3 Spider-Manhttp://www.optimum7.com/css3-man/animation.html

14

Image Transitionshttp://www.nikesh.me/demo/image-effect.html

15

Nike Better Worldhttp://nikebetterworld.com/index

16

Nike Snowboardinghttp://www.nikesnowboarding.com/

17

Photo Galleryhttp://gughifassino.it/#/all/

18

3D Cubehttp://www.paulrhayes.com/experiments/cube-3d/index.html

19

Our Options

Flash jQuery SenchaCSS3

20

Flashdemo

21

jQuery http://labs.joshsagermedia.com/basic-jquery

http://labs.joshsagermedia.com/basic-jquery/source.zip

22

CSS3http://labs.joshsagermedia.com/css3

http://labs.joshsagermedia.com/css3/source.zip

*These demos should be viewed in chrome or safari

23

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

Lets Compare

25

FLASH JQUERY CSS3 SENCHA

IE (LEGACY)

IE 9

FIREFOX

CHROME

SAFARI

OPERA

IPAD/IPHONE * * *

ANDROID **

26

Takeaways

27

Become a TechnologyWrangler

28

Technologies can work together

29

It’s about the idea. Technology should

be invisible.

30

"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