読了: 約 2 分
カヤックのデザイナーブログで紹介されていて興味があったので
調べてみました。
これの1つ目に紹介されていたものです。
Chromeで遊ぶのが推奨されてます！
CSS3 OF THE DEAD – jsdo.it – share JavaScript, HTML5 and CSS
これfokedしてCSS見てみたら、animationに名前付けて、transform:translateX(0px) translateY(0px);とかで
動かしているんですね。
{
-webkit-animation-name:enemy19;
-webkit-animation-duration:10s;
-webkit-animation-delay:2s;
}
制作者による解説までも載せているなんて、
なんて素晴らしいのでしょうか。目からｼｮｯﾊﾟｲものが出てきました。
checkedの状態を見て、見た目を変更しているんですね。
-webkit-appearance:button;でinput[type=”radio”]の場合background-imageが効かないという
問題を解決しているのも凄いですね。
CSS3 OF THE DEAD解説
CSS3で使えるセレクタやプロパティが増えて
表現できる幅がグッと増えましたね。ワクワクしてきました。
HTML5花火大会をみんなで作ろう！HTML5花火大会をみんなで作ろう！
これも面白いですね。audioタグ使ってしっかり創り込んだモノを初めて見たので
感動しました。
簡単に書き方を
<audio id="bgm" autobuffer autoplay loop preload> <source src="/static/assets/sound/01/sound.ogg" /> <source src="/static/assets/sound/01/sound.mp3" /> </audio> <p id="muteController" class="on" onClick="tglmute(); ">BGM: <span class="on">on</span> / <span class="off">off</span></p>
最後にon/offで切り替えのボタンを作って、JavaScriptで切り替えてますね。
そして改めてjsdo.itは、開発者が簡単に共有して、
そこからもっと面白い物が生み出せたら良いよね！というコンセプトと
デザインもシンプルかつ使い易くて素晴らしいなと思いました。
jsdo.it
この記事も随時追記していきます。