2013年チェックしておきたいスタイルシートやスクリプトのスゴ技たち -Top Pens of 2013

当ブログでもお馴染みのCodePenから、スタイルシートやスクリプトを使って実装された2013年にもっとも人気のあったスゴイデモを紹介します。

Top Pens of 2013

Top Pens of 2013はベスト100が掲載されており、どれも見応え十分のワクワクするクリエイティブな作品ばかりですが、その中からトップ10を紹介します。

Absolute Centring
まずは10位、CSSだけで天地水平の中央にモーダルボックスを表示します。IE8対応でレスポンシブにも対応しているので実用的！

Direction aware 3D hover effect
9位は四方からホバーに合わせて3Dのパネルがアニメーションします。

Countdown Clock
8位は滑らかなアニメーションでパタパタするカウントダウンクロック。

Tunnel vision 3D CSS
7位はCSSで実装された3Dのトンネル、アニメーションで動いているので酔い注意です。

Windows 8 like Animations
6位はWindows 8風のアニメーションを楽しむカードレイアウト。くるっとなったり、すぅっとなったり、レスポンシブにも対応しています。

Navicon Transformicons
5位は変形のアニメーションが楽しいナビコン。上の状態から下の状態に変化するのが面白いです。

Squishy Toggle Buttons
4位はゴムのような質感が面白いボタン。くにゃっとしますｗ

Twitter Button Concept
3位はパタッと開くアニメーションがかわいいTwitterのボタン。

Touch deveice jelly menu
2位はゼリーでできたように変形するメニュー、ぷるるんと気持ちよさそう！

Tearable Cloth
1位はCanvasを使ってぬめぬめ動きます。布地の質感がスゴイです！
右クリック&ドラッグで破れるのもスゴイ！