Mario 3 recreated with CSS3 animations and media queries | Hacker News Reader

Mario 3 recreated with CSS3 animations and media queries

developer.mozilla.org

170 pointsdragongraphics44 comments

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/).

Another way to maybe do it is to use the pseudo-selector :target. See here for an example: http://news.ycombinator.com/item?id=4712350

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...

I wonder if anyone has ever made a game with window resizing as the control mechanism.

Challenge accepted!

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).

I found the exact same issues as this.

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.

Agree! The mandatory window re-size was not a good idea :(

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.

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.

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.

Do I need to resize my browser window to get it to start?

I have tabs, so I had to pull the tab out to a new window (or else risk resizing everything that is already the way I want it).

I don't know how wide my windows are! I had to pull up the javascript console and read "window.innerWidth" and 320 is amazingly small for me.

Decent point on not knowing how big your window size is - think I'll update to include a width counter on the start screen.

Reason for the resizing down at the start is simply so only certain parts of the animation show at different times. It means I can control what width the animation is being viewed at, as otherwise I'd have to animate everything across a very large width potentially, which would be pretty time consuming, as this could be huge. Think with the feedback I've had, will release as a non media query animation as well when I get chance.

It took me a while to realize that the resizing was the whole point -- the scene animates as it gets wider.

There's nothing ground-breaking here, but neither is there in many of the XKCD stunts that we fawn over here. I think if you just describe it that way we'd all know what's going on.

I'm using a tiling-WM and the resizing window thing was a bit annoying to me, and was somewhat distracting from the demo. But other than that, I'm impressed and I had lots of fun playing with the css to see how it was built!

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.

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

display: none;

"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.]

Bluetooth would work better than NFC in this instance.

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

Okay. I give. You've managed to flip my cynicism and imagine this into an article I would up-vote. If someone decides to do this though, they should at least use @jasonkolb's garage! Last thing the poor guy needs is that waved in his face.

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

Not a dumb question - only reason was because I wanted an excuse to play around with css animations and see how powerful they are in their current state.

SVG would probably be much more robust as a solution (as would canvas have been) - I think the demo shows more than anything that CSS3 animations need slightly more reliable support across modern browsers before they are a viable choice for doing some really nice things with them.

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).

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.

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

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.

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.

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.

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.

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

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.

What version of Firefox were you using?

I got this same behavior on Windows 8 using Chrome 22.0.1229.94 and IE 10.

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

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.

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.

Using Firefox 16.0.2 on OSX 10.8.2.

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.

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

I should investigate CSS3 animations further.

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

Cheers dude :)

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

Reply on news.ycombinator.com