CSS3 recreation of the intro to the 1967 Spiderman Show

http://www.optimum7.com/css3-man/

by kylebragger • 16 years ago

52 29 16 years ago

superduper2• 16 years ago

I'm really excited about CSS3 lowering our need to rely on things like jQuery, but I can just see some lame tool being made that allow people to animate things and we see hundreds of horrible CSS3 animations.

betageek3• 16 years ago

<timewarp> I'm really excited about Flash lowering our need to rely on things like animated GIFs, but I can just see some lame tool being made that allows people to animate things and we see hundreds of horrible Flash animations </timewarp>

superduper2• 16 years ago

Good point. I thought that just as I clicked submit. I guess it's the same no matter what the technology.

IChrisI• 16 years ago

I think that is the only time I've seen a CSS preloader. That in and of itself is amazing.

tomlin2• 16 years ago

I don't know why anyone would game for a preloader, especially one that doesn't work all that well.

rauljara2• 16 years ago

"Animation can be a little jumpy 1st time around..."

No kidding. It played horribly on my 3-year old macbook. This is the sort of thing that played smoothly on flash back in 90's. I want css3 animation to replace flash very badly, but this is the strongest piece of evidence I've seen yet that css animation isn't quite ready yet.

logic• 16 years ago

Interesting; it ran without a hitch the first time in Chrome for me on a T500 ThinkPad running XP.

Avoiding any critique of the animation itself, that was surprisingly well-executed. Considering we're on the equivilent of "1.0" tools right now (both in terms of rendering and development/design), this little demo put a smile on my face.

thorax• 16 years ago

Looked stellar also on Chrome 4.1 on a Vista laptop.

rauljara2• 16 years ago

Actually, it ran fine for me in chrome, too. I guess the first viewing was safari's fault.

daleharvey3• 16 years ago

css3 animation were never designed to replace flash for playing non interactive cartoon animations, the fact they can possibly be abused to do that is pretty astounding, good show.

(in case you were wondering what would be used for animations, this should really be a video, if it was interactive / dynamic then you would look at svg animation / canvas)

betageek3• 16 years ago

Is it just me or does this look awful? Using Safari 4 I get loads of judder on the animations and the bitmap scaling is really poor.

raimondious• 16 years ago

Play it twice — the first time was awful for me, but the second time was nice.

superkarn• 16 years ago

I didn't see any animation, just a bunch of still images. And about 10 seconds after the end, I heard the music.

robotron• 16 years ago

You have to watch it again. I saw still images the first time then replayed it. Worked flawlessly... except there was sound?

ilike• 16 years ago

Same here on Firefox 3.6.3+ OSX 10.5.6

Looks like a badly timed choppy slideshow even after 3rd load. The preloader looked very nice.

tomlin2• 16 years ago

Flash could have done it better. And Flash is the CPU hog, right?

kylebragger• 16 years ago

Probably, but this is cool not because it's super smooth and hyper-realistic, but just because it's now possible to do something like this in pure HTML/CSS. I couldn't fathom that five years ago.

fjania• 16 years ago

I appreciate the use of CSS3, but that's the Strongbad-lookinest rendition of Spiderman I've ever seen

inerte• 16 years ago

Cool, but I wish the author didn't put emphasis comparing the CSS3 animation with Flash.

I don't think I've ever seen anything so bad in Flash. I know it's possible to do worse, but it's also so easy to do better.

Now we'll get people saying "Flash is still king" while the focus could be shifted to "Oh man CSS3 looks nice". The author is taunting but its attack could not be weaker.

daleharvey3• 16 years ago

I can see your point, but its just a fun experiment completely abusing an unsuited technology, if someone can make a spiderman cartoon in css3, you can certainly make your div move from a to b in it.

betageek3• 16 years ago

I think that sums up my feeling on the Flash v HTML5 arguments - if all you are doing is moving a div from A to B, CSS3/HTML5 is for you. If your actually doing some motion graphics that need fine grained control and high production values you aren't going to be moving away from Flash any time soon.

joshuarr• 16 years ago

I agree except that this is infant tech at work. Do you happen to remember Flash 1 animations? Eeeew.

aristus• 16 years ago

I also remember Gabocorp. In the hands of a truly talented person anything is possible.

not_an_alien2• 16 years ago

I guess that's my issue with it. I, for one, am impressed that this can all be done with CSS3, that framerate is pretty good, that image rotating and scaling has great quality, and all that. But with the guy taunting the "no flash!" thing so much, I can't help but compare the two and reach the conclusion that is way worse in all shape and form to what was possible with Flash 10 years ago, and much more so today.

not_an_alien2• 16 years ago

So after a lot of work, using poorly documented features that are not consistently adopted and by using very specific versions of very specific browsers that should amount to near 10% of the user audience, I'm able to view an animation that is on par with what Flash could deliver 14 years ago without a lot of hassle. Only a lit bit worse and bigger and with worse performance, since this is using bitmaps instead of vectors.

Awesome.

pbhjpbhj• 16 years ago

You get a free copyright violation thrown in, awesome.

I could be wrong he may have sought permission to copy the theme and reissue the theme music, I just didn't see a "licensed from ..." notice.

Keyframe• 16 years ago

Wow, that's some pretty bad animation :)

mikecane• 16 years ago

What I saw: http://ipadtest.wordpress.com/2010/05/04/something-like-earl...

And I have someone claiming it does not work on the iPad. And someone I trust says it did work on his Droid. Weird.

Update: I now have a screensnap there showing it not working on an iPad.

CSS3 recreation of the intro to the 1967 Spiderman Show

Related Stories