4 ms·

CSS3 recreation of the intro to the 1967 Spiderman Show

52 points by kylebragger 16y ago

superduper 16y 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.
- betageek 16y 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>
  - superduper 16y ago
    Good point. I thought that just as I clicked submit. I guess it's the same no matter what the technology.
IChrisI 16y ago
I think that is the only time I've seen a CSS preloader. That in and of itself is amazing.
- tomlin 16y ago
  I don't know why anyone would game for a preloader, especially one that doesn't work all that well.
rauljara 16y 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 16y 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 16y ago
    Looked stellar also on Chrome 4.1 on a Vista laptop.
  - rauljara 16y ago
    Actually, it ran fine for me in chrome, too. I guess the first viewing was safari's fault.
- daleharvey 16y 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)
betageek 16y 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 16y ago
  Play it twice — the first time was awful for me, but the second time was nice.
superkarn 16y 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 16y ago
  You have to watch it again. I saw still images the first time then replayed it. Worked flawlessly... except there was sound?
- ilike 16y 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.
tomlin 16y ago
Flash could have done it better. And Flash is the CPU hog, right?
- kylebragger 16y 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 16y ago
I appreciate the use of CSS3, but that's the Strongbad-lookinest rendition of Spiderman I've ever seen
inerte 16y 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.
- daleharvey 16y 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.
  - betageek 16y 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.
    - daleharvey 16y ago
      I dont particularly agree, css3 was I am pretty sure never designed for animating cartoons. svg animation / html5 video or canvas however, are well suited to do a lot of the things currently done in flash.
- joshuarr 16y ago
  I agree except that this is infant tech at work. Do you happen to remember Flash 1 animations? Eeeew.
  - aristus 16y ago
    I also remember Gabocorp. In the hands of a truly talented person anything is possible.
numbchuckskills 16y ago
cool, but i wish the author had used flash.
not_an_alien 16y 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 16y 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 16y ago
Wow, that's some pretty bad animation :)
mikecane 16y ago
What I saw: http://ipadtest.wordpress.com/2010/05/04/something-like-early-tv/ 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.

52 points by kylebragger 16y 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.

betageek 16y 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>
- superduper 16y ago
  Good point. I thought that just as I clicked submit. I guess it's the same no matter what the technology.

IChrisI 16y ago

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

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

rauljara 16y 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 16y 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 16y ago
  Looked stellar also on Chrome 4.1 on a Vista laptop.
- rauljara 16y ago
  Actually, it ran fine for me in chrome, too. I guess the first viewing was safari's fault.
daleharvey 16y 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)

betageek 16y 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 16y ago
Play it twice — the first time was awful for me, but the second time was nice.

superkarn 16y 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 16y ago
You have to watch it again. I saw still images the first time then replayed it. Worked flawlessly... except there was sound?
ilike 16y 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.

tomlin 16y ago

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

kylebragger 16y 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 16y ago

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

inerte 16y 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.

daleharvey 16y 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.
- betageek 16y 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.
  - daleharvey 16y ago
    I dont particularly agree, css3 was I am pretty sure never designed for animating cartoons. svg animation / html5 video or canvas however, are well suited to do a lot of the things currently done in flash.
joshuarr 16y ago
I agree except that this is infant tech at work. Do you happen to remember Flash 1 animations? Eeeew.
- aristus 16y ago
  I also remember Gabocorp. In the hands of a truly talented person anything is possible.

numbchuckskills 16y ago

cool, but i wish the author had used flash.

not_an_alien 16y 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 16y 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 16y ago

Wow, that's some pretty bad animation :)

mikecane 16y ago

What I saw: http://ipadtest.wordpress.com/2010/05/04/something-like-early-tv/ 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.