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