りんごが好きなのでぃす

Macを中心に、たま〜にiPhoneやiPadなどの話題も届けていたら今年で26年目を迎えてました

HTML5+CSS3+JavaScriptなウェブ時計

 

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

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

webkit_clock.jpg

【クリックで拡大】

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

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

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