Media Query Mario

A progressive series of CSS3 animation fired by media queries

이용 기술 자바스크립트, HTML5, CSS3, Audio, Fonts & Type,

  • 조회수 624회
  • 댓글수 6건

현재 데모에 대한 개발자 댓글

This is a recreation of Super Mario 3 using media queries, CSS3 animations and embedded HTML5 audio elements. The animation is controlled using CSS3 media queries to step through the level.

The demo uses the step-end timing function to control background spriting, which is implemented differently in Firefox to Webkit - Webkit seems to ignore the sprite stepping as you progress through the animation - therefore the element spriting is a bit less slick in Webkit, but works perfectly in Firefox.

Any feedback would be great - positive or negative :) - and if you do like it, please do like it or share it above.

All rights to Mario are held by Nintendo, and I am simply using the assets for a completely not-for-profit demo.

6 건의 댓글 있음

새로운 데모를 추가하려면 로그인하십시오.

  1. judavi에 의한 댓글

    I'm very impressed about this demo, I don't really know the new the features of Css Media Queries
  2. RezaAssar에 의한 댓글

    Very cool.
  3. Pomax에 의한 댓글

    Attention caught! Will you be at MozFest in London next week? We're doing some hackable games talks and workshops, and it would be great to talk to you about pure HTML5 games like this demo =)
    1. dragongraphics에 의한 댓글

      Unfortunately not, as I'm down in Brighton for Full Frontal conference that weekend. If you guys have any future meetups around this though let me know - really interested in the potential for this kind of tech!
  4. solidhex에 의한 댓글

    This is seriously bad ass. Great work!
  5. andresroberto10에 의한 댓글

    This is cool man! Great job : )

About this Demo

소스 다운로드 7801.63 KB · ZIP 파일

Browse the Source

현재 데모는 GPL 라이센스 하에 공개되고 있습니다.