Pacmanimation

Animations, transformations, content and fun through mediaqueries

이용 기술 HTML5, CSS3, Fonts & Type, 모바일

  • 조회수 264회
  • 댓글수 3건

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

The demo shows how to create a funny animated scene of pacman and how to show content in different ways using mediaqueries and CSS only (so javascript was not intentionally used).

On browser resize, pacman begins to eat balls and to increase his score moving to the left, while a ghost (inky) is trying to chase him. At some breakpoints, an object may pulse: a click on these pulsing objects reveals some insights on a layer about the game. The same content is thus placed on the bottom of the page when the browser width reaches the last breakpoint.

Some content explaining the purpose of the demo is also available when CSS support is not enabled.

Technologies used
- CSS3
- SASS
- Font embedding

It looks good on Firefox and Opera. On webkit (it doesn't support animations on pseudoelements) and IE9 some effects fail.

3 건의 댓글 있음

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

  1. depy에 의한 댓글

    Nice one, I liked it :D Made me remember the childhood days..
  2. monigarr에 의한 댓글

    This is so cute! Thanks for sharing :)
  3. fcalderan에 의한 댓글

    @depy, @monigarr - Thank you :)

About this Demo

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

Browse the Source

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