りんごが好きなのでぃす

噂話などには極力触れずにApple製品に関する情報を紹介してます、反リーク系の方々よろしくネ

HTML5+CSS3+JavaScriptなウェブ時計

画像なしでもこの出来映え!すごい!

レンダリングエンジンにWebKitを採用しているSafariGoogle Chromeを利用している方だけが楽しめるコンテンツ、Web Clockです。

webkit_clock.jpg

【クリックで拡大】

作成にはHTML5canvasとCSS3、そしてJavaScriptとWeb Fontを使っているだけ。SVGもイメージファイルも使用していないとの事。時計も、飛んでる飛行機も、同心円のアニメもすべて「画像」ではありませんが、世界地図はどうやって表してるのかしら?(作者さんのブログを見つけました、詳しくはこちらで)

ページ内に設置されている再生ボタンを押すと都市を点々と移ってくれますし、左に表示されている都市名をクリックすればグリグリ〜っというアニメとともにその都市の時刻を表示してくれます。

決して機能豊富なものではありませんが、Flashなしでこういう事が出来るというのは面白いですよね(Flashの賛否論ではなく、素直に"Flashを使っていないのに?!"という面白さ)。

広告を非表示にする