2013年チェックしておきたいスタイルシートやスクリプトのスゴ技たち -Top Pens of 2013
Post on:2014年1月16日
当ブログでもお馴染みのCodePenから、スタイルシートやスクリプトを使って実装された2013年にもっとも人気のあったスゴイデモを紹介します。
![サイトのキャプチャ](/wp-content/uploads-201401/2014011605.png)
Top Pens of 2013はベスト100が掲載されており、どれも見応え十分のワクワクするクリエイティブな作品ばかりですが、その中からトップ10を紹介します。
![デモのキャプチャ](/wp-content/uploads-201401/2014011606-10.png)
Absolute Centring
まずは10位、CSSだけで天地水平の中央にモーダルボックスを表示します。IE8対応でレスポンシブにも対応しているので実用的!
![デモのキャプチャ](/wp-content/uploads-201401/2014011606-09.png)
Direction aware 3D hover effect
9位は四方からホバーに合わせて3Dのパネルがアニメーションします。
![デモのキャプチャ](/wp-content/uploads-201401/2014011606-08.png)
Countdown Clock
8位は滑らかなアニメーションでパタパタするカウントダウンクロック。
![デモのキャプチャ](/wp-content/uploads-201401/2014011606-07.png)
Tunnel vision 3D CSS
7位はCSSで実装された3Dのトンネル、アニメーションで動いているので酔い注意です。
![デモのキャプチャ](/wp-content/uploads-201401/2014011606-06.png)
Windows 8 like Animations
6位はWindows 8風のアニメーションを楽しむカードレイアウト。くるっとなったり、すぅっとなったり、レスポンシブにも対応しています。
![デモのキャプチャ](/wp-content/uploads-201401/2014011606-05.png)
Navicon Transformicons
5位は変形のアニメーションが楽しいナビコン。上の状態から下の状態に変化するのが面白いです。
![デモのキャプチャ](/wp-content/uploads-201401/2014011606-04.png)
Squishy Toggle Buttons
4位はゴムのような質感が面白いボタン。くにゃっとしますw
![デモのアニメーション](/wp-content/uploads-201301/2013011706.gif)
Twitter Button Concept
3位はパタッと開くアニメーションがかわいいTwitterのボタン。
![デモのアニメーション](/wp-content/uploads-201302/2013082101.gif)
Touch deveice jelly menu
2位はゼリーでできたように変形するメニュー、ぷるるんと気持ちよさそう!
![デモのキャプチャ](/wp-content/uploads-201401/2014011606-01.png)
Tearable Cloth
1位はCanvasを使ってぬめぬめ動きます。布地の質感がスゴイです!
右クリック&ドラッグで破れるのもスゴイ!
sponsors