Post

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: codepen.io/t_afif/full/... via @codepen.io ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.

2/1/26, 1:39 pm26 reposts145 likes

Adam Kuhn

@cobrawinfrey.dev

2 Jan

wild stuff! took a stab at something similar awhile back using scroll-timeline (ripping the scrolltrigger js out of an older pen of mine- bit less polished though) codepen.io/cobra_winfre...

codepen.ioSuper Mario CSS Only Scrollable Timeline...

CSS by T. Afif

@css-only.dev

2 Jan

I am full scroll-stuff as well but I am hiding the scrollbar and relying on the fact that you can scroll using keyboard 😊

Adam Kuhn

@cobrawinfrey.dev

2 Jan

Feel like it's your personal mission to make JS obsolete and I'm here for it

Alec Lloyd Probert

@graphieros.npmx.social

3 Jan

good luck with that ^^

Script Raccoon

@scriptraccoon.dev

16 Feb

This is some next level work. Impressive!

Josh Collinsworth

@collinsworth.dev

4 Jan

I have a comment that is in no way related to the (undeniably impressive) code: It feels strange to see a SNES Mario sprite against the original 8-bit Super Mario Bros. background. It gives a sort of "uncanny valley" vibe. I wonder if there's a reason you chose against the sprite from the game?

Adam Kuhn

@cobrawinfrey.dev

4 Jan

glad it’s not just me

CSS by T. Afif

@css-only.dev

4 Jan

No particular reason 😅 I picked a Mario that looks good to me and easy to manipulate (Didn't want to spend a lot of times with image editing to get the correct sizing) and I already had the background/block sprites I used before ... Then I combined both 🙃

Josh Collinsworth

@collinsworth.dev

4 Jan

Signed, a 45-year-old nerd who probably cares too much about this

Bramus

@bram.us

4 Jan

Nice! Tip: to improve the scroll-driven animations feature detection, also check for `animation-range` support: www.bram.us/2024/09/24/f...

bram.usFeature detecting Scroll-Driven Animations with @supports: you want to check for animation-range tooYou want to filter out Firefox’s partial implementation …

Jakob E

@jakob-e.bsky.social

4 Jan

👍🏻 nice tip Wouldn’t it also work just testing for animation-range? @supports (animation-range: 0% 100%) {}

Ana Tudor

@anatudor.bsky.social

4 Jan

That was going to be my question because that's what I've done to show support info boxes in non-supporting browsers. For example here codepen.io/thebabydino/...

Bramus

@bram.us

4 Jan

Yeah, that would also work as animation-range is not used anywhere else in CSS :) The reason why I add it, is that you can later (when Firefox officially ships) just remove the addition instead of needing to replace the check.