CSS3 recreation of the intro to the 1967 Spiderman Show(optimum7.com)
optimum7.com
CSS3 recreation of the intro to the 1967 Spiderman Show
http://www.optimum7.com/css3-man/
13 comments
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.
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.
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.
svg animation / html5 video or canvas however, are well suited to do a lot of the things currently done in flash.
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.
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.
Awesome.
"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.
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.
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.
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.
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)
(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)
I appreciate the use of CSS3, but that's the Strongbad-lookinest rendition of Spiderman I've ever seen
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.
Play it twice — the first time was awful for me, but the second time was nice.
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.
<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>
Good point. I thought that just as I clicked submit. I guess it's the same no matter what the technology.
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.
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.
I didn't see any animation, just a bunch of still images. And about 10 seconds after the end, I heard the music.
Flash could have done it better. And Flash is the CPU hog, right?
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.
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.
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.
Wow, that's some pretty bad animation :)
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.