Mozilla 演示室

  • 提交演示

HTML5 trombone!

Funny and usable trombone.

建立方法 JavaScript, HTML5, CSS3, 音频,

  • 130 次观看
  • 2 个评论


This demo shows capabilities of media queries to design animating trombone which plays sounds depending on the size of the browser's window. All animations are done using just CSS3 and media queries.

Besides being fun to play with it remains fully functional on small screen devices where you simply cannot resize your browser's window. In that case you can click on letters to make sound.

Javascript is only used in this demo to play sounds using Audio API.

到目前为止有 2 个评论


  1. launchinteractive 说:

    Nice work. I like how the background changes colour with the notes plus the mobile version is a nice touch.
    1. Tomasz_Kolodziejski 说:

      My main goal was to make this demo not only just next toy but also to show that media query can increase usability on small screen devices. Thanks a lot!


下载源代码 663.56 KB · ZIP 格式

此演示发布于 BSD 授权之下。

Tomasz_Kolodziejski 的更多作品