

Mario 3 recreated with CSS3 animations and media queries - dragongraphics
https://developer.mozilla.org/en-US/demos/detail/media-query-mario

======
slewis
Hey dude. Awesome demo. Wanted to be a counter-voice to all the commenters
here complaining about having to resize the window to make this work. You've
got lots of upvotes so clearly people like your work. The only people
commenting are the pessimists.

The resize thing is a cool hack. I wonder if anyone has ever made a game with
window resizing as the control mechanism.

Finally, if you do you want to get rid of the resizing, maybe an easy way
would be to simulate it by covering the un-animated part of the window with a
curtain (Mario style: <http://www.flickr.com/photos/shieldsokc/5388817583/>).

~~~
dragongraphics
Thanks :) Think it's easy for some to forget it's a tech demo, so it isn't
meant to be absolutely 'perfect', but really happy with the feedback so far.

Good idea re the curtain - it would be quite an easy port to make the
animation work like that, so think I might do that at some point.

Think there are lots of possibilities around window resizing that haven't been
explored yet - could make some really interesting effects...

------
kstenerud
Pretty cool idea, though having to constantly resize the window got annoying,
and I think it lost track of the window size after while because Mario started
collecting coins without touching them, then ran off the screen as he did a
flying jump, after which the demo froze (on Chrome).

~~~
duqee
I found the exact same issues as this.

------
orofino
This is reasonably interesting, however the window thing is a bit a problem
for me. I found it distracting form the actual content of the demo.

Perhaps I'm missing the point, but it would have been better in my opinion if
you'd found another way to make it auto play in whatever window size.

~~~
dragongraphics
I explored a few options - the reason I decided to make it controlled by the
user was so it didn't have to open in a new window (as you can only control
the width of the window with JS in a separate window).

Thanks for the feedback though - might create a separate self-running version
at some point.

~~~
orofino
This only works when resizing the window? Would an ever-increasing div work?
If you floated it right the size would always increase on the left, mimicking
the drag and resize action that the user is doing.

That said, I get that you're pushing the limits as it is here and you've
likely already considered this as an option.

~~~
dragongraphics
Yeh, can use resizeTo but only when you have a separate window.

Not sure if an increasing div would work. Could potentially do it as an
iframe, but not sure how nicely that'd work, would have to try it out.

Think I'll release it as a separate full animation at some point - will write
up how it's all put together when I do.

------
jasonkolb
How in the world do people have time to make things like this? I've been
trying to find time to clean my garage for a year.

~~~
famousactress
Greaaat. Can't wait for the _"Show HN: Cleaned my garage in pure CSS"_ post :)

~~~
XaspR8d
" _I built an army of Arduino robots attached to the base of all of the major
objects in my garage that can read any website and assign themselves DOM
elements that most match their physical attributes, rearranging the whole
space to parallel that site's hierarchy and stylesheets. (Did I mention they
coordinate with each other over a custom NFC protocol I developed?)_ "

[I guess I went so ridiculous it actually sounds cool.]

~~~
bduerst
Bluetooth would work better than NFC in this instance.

~~~
skreech
Agreed, though 802.15.4 (mesh) would probably be even better for an "army" of
nanobots.

------
colanderman
Maybe this is a dumb question, but why not use SVG? It's scriptable and
supported on modern browsers.

~~~
smickie
I might be able to answer this. Animating SVG is tricky, groups is a
particularly issues because each element inside a group has to be animated as
opposed to just animating the parent group tag (which causes a lot of issues
with rotations in particular, you have to break out the trigonometry in
javascript).

~~~
jarek-foksa
I disagree, <g> element can be animated with JavaScript as easily as e.g.
<div>. You just change the value of transform attribute. Rotations can be
handled easily once you understand how matrixes work.

------
irollboozers
Wait, it broke for me once he got the feather and flew away. Was it supposed
to end there?

------
phatbyte
I'm sure this took a lot of work to do, but it's too buggy, I don't understand
why I have to increase the window size, that seems to cause the animations
stop of become sluggish. Overall it's not a good demo even though the
possibilities of this are nice.

~~~
dragongraphics
Thanks for the feedback - reason it's a bit buggy is mainly down to the
implementation of the animation step-timing.

In Firefox, it works as you would expect, stepping through the spriting. In
webkit, it's very inconsistent in how it renders, and doesn't look as polished
because of this.

I've noticed the speed of the animation being effected by the resizing - like
mentioned to others, will probably release a version which just shows the
animations off separate to the window resizing as well to avoid this. The main
reason for including reliance on media queries was to fit it into the mozilla
dev derby criteria for this month.

------
sgdesign
Really nice, but I'm not entirely sure I see the point of controlling the
animation through media queries. For me it takes away from the real
performance, which is animating the whole thing through CSS in the first
place.

~~~
dragongraphics
Only reason it's controlled with media queries is because it was an entry for
this months Mozilla dev derby (which is based around media queries).

I could pretty easily modify and release as a straight up animation though
with no media query control.

------
Sander_Marechal
I have a tiling window manager. That means any resizing is automatic.

------
moystard
Strangely enough, the demo works using Webkit (Chrome) but not with Firefox :
I cannot start the animation, as the Start button does not appear even if I
resize the window properly.

~~~
dragongraphics
What version of Firefox were you using?

~~~
jbrackett
I'm seeing the issue using Firefox 16.0.2 on OSX Lion.

~~~
dragongraphics
Very strange - I'm on same version here.

I'm going to add a width counter to give more feedback on the resizing, as
seems to be a bit of a bottleneck.

~~~
eric_the_read
It seems the minimum reported by window.innerWidth on 16.0.2 (OS X, 10.8.2) is
453. Once it hits that, I can drag it all the smaller I like, and it is stuck
at 453.

------
RandallBrown
Not sure why everyone is complaining about the resizing thing. I thought that
was the whole point of the demo, to show that you can control an animation
with the window size.

------
StavrosK
I have no idea how someone would make something like this. Good job!

I should investigate CSS3 animations further.

------
Groxx
Absolutely insane. I love it! Looks great, runs well, and one of the weirdest
uses of media queries I've seen.

~~~
dragongraphics
Cheers dude :)

------
OoTheNigerian
Wasted over 2 mins re-sizing and nothing happened. There has to be a better
way.

