2014年チェックしておきたいスタイルシートやスクリプトのスゴ技たち -Top Pens of 2014
Post on:2015年1月14日
世界中の多くのWeb制作者・クリエイターが利用しているCodePenから、スタイルシートやスクリプトを使って実装された2014年にもっとも人気のあったデモを紹介します。
2015年も要注目ですね!
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011403.png)
Top Pens of 2014はベスト100が掲載されており、どれも見応え十分のワクワクするクリエイティブな作品ばかり、その中からトップ10+αを紹介します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011404-01.png)
背景にランプの画像を3つ重ね、それぞれ異なるタイミングでゆらゆらと動かしています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011404-02.png)
9位:Pure CSS Parallax Scrolling
Pure CSSで実装されたパララックスのスクロールエフェクト。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011404-03.png)
垂直だけでなく、水平のパララックスにも対応したSassのmixin。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011404-04.png)
7位:Apple's iMac scrolling effect
iMac Retinaの5Kディスプレイモデルのページエフェクトを再現したデモ。全面に描画された画像をズームアウトしてiMacのディスプレイを表示します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011404-05.png)
6位:Pure CSS One Div Weather Animated Icons
晴れ、曇り、雨、虹など、これらお天気のアニメーションアイコンは全て一つでdivとCSSで実装されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011404-06.png)
ゆらゆらとアニメーションする3Dのタイポグラフィ。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011404-07.png)
Firewatchで使用されているヘッダのパララックスをCSSで再現したデモ。画像に見えるのは全てBase-64にエンコードされたものです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011404-08.png)
3位:Pull Menu
プルダウンのインタラクションを楽しめるデモ。スマホのモックアップ自体もHTMLで作られています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011404-09.png)
パルス間隔が乱れたようなノイズのアニメーションを伴ったテキストのエフェクト。
ノイズのアニメーションはこちらもなかなかかっこいいです。
Glitchy 404 Page
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011404-10.png)
SVGを使ったシンプルなローディングアイコンのアニメーション。
最後に、個人的に印象的だったものも。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011404-11.png)
CSSで実装された美しい半透明のパネル、しかもこれドラッグもできます。ドラッグ操作だけスクリプトを使用していますが、透けた背景を反映させるアイデアは非常に面白いです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015011404-12.png)
ハウルの動く城。HTMLもCSSもJavaScriptもかなりの大作です。
sponsors