- 2010-03-13 (土)
- 技術
画像やFlashはいっさい使わずに何か中心に向かってアニメーションするものを作りたいと思って制作してみました。
今回もjsDeferrd.jsを使用。
cho45's jsdeferred at master - GitHub
中心に向かって行くということで、何かが中心にないと面白くありません。
なので、疑似的な太陽をCSS3で作り、そこにHTML5のcanvasが向かって行くという感じになりました。
サンプルコード - CSS3
実はまだこのgradientというCSSプロパティが良くわかっていなくて、Firefoxで出来るけど、Safariでどうやるのかな〜という部分を検証中です。
-moz-radial-gradientというプロパティを使って太陽を描いているんですが、これをWebkitでどう指定するのかが分からない！
なので、mozとwebkitでは別々の背景にしています。
またbodyタグに-moz-radial-gradientを指定するとなぜかうまく円が描かれなかったです。
divを画面のheight、widthに広げてそこにスタイルを当てるようにして回避しました。
あとHTML5のvideoタグも使って音楽を出しています。
使っている曲は、HoldenのA Break in The Clouds - Main Mixです。（怒られたら使用するのやめますw）
宇宙っぽさが演出できる名曲です。
Firefoxで見ていただくのが一番いいです。
Chrome、Safariの場合は円ではなくグラデーションになってます。
以下からどうぞ。
space - HTML5 & CSS3 DEMO
プログラムコード
・gist: 331165 - GitHub
- Newer: MacOS10.5でMacPortsからSVNを入れる方法
- Older: squareDeferred
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1251
- Listed below are links to weblogs that reference
- space - HTML5 & CSS3 DEMO from HouseTect, JavaScriptな情報をあなたに
