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

世界中の多くのWeb制作者・クリエイターが利用しているCodePenから、スタイルシートやスクリプトを使って実装された2014年にもっとも人気のあったデモを紹介します。

2015年も要注目ですね!

サイトのキャプチャ

Top Pens of 2014

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

デモのキャプチャ

10位:A Pen by Brandon Lawrence

背景にランプの画像を3つ重ね、それぞれ異なるタイミングでゆらゆらと動かしています。

デモのキャプチャ

9位:Pure CSS Parallax Scrolling

Pure CSSで実装されたパララックスのスクロールエフェクト。

デモのキャプチャ

8位:Sass parallax example

垂直だけでなく、水平のパララックスにも対応したSassのmixin。

デモのキャプチャ

7位:Apple's iMac scrolling effect

iMac Retinaの5Kディスプレイモデルのページエフェクトを再現したデモ。全面に描画された画像をズームアウトしてiMacのディスプレイを表示します。

デモのキャプチャ

6位:Pure CSS One Div Weather Animated Icons

晴れ、曇り、雨、虹など、これらお天気のアニメーションアイコンは全て一つでdivとCSSで実装されています。

デモのキャプチャ

5位:3D CSS Typography

ゆらゆらとアニメーションする3Dのタイポグラフィ。

デモのキャプチャ

4位:Firewatch Parallax in CSS

Firewatchで使用されているヘッダのパララックスをCSSで再現したデモ。画像に見えるのは全てBase-64にエンコードされたものです。

デモのキャプチャ

3位:Pull Menu

プルダウンのインタラクションを楽しめるデモ。スマホのモックアップ自体もHTMLで作られています。

デモのキャプチャ

2位:CSS Glitched Text

パルス間隔が乱れたようなノイズのアニメーションを伴ったテキストのエフェクト。
ノイズのアニメーションはこちらもなかなかかっこいいです。
Glitchy 404 Page

デモのキャプチャ

1位:SVG Loading icons

SVGを使ったシンプルなローディングアイコンのアニメーション。

最後に、個人的に印象的だったものも。

デモのキャプチャ

Blurred Background CSS

CSSで実装された美しい半透明のパネル、しかもこれドラッグもできます。ドラッグ操作だけスクリプトを使用していますが、透けた背景を反映させるアイデアは非常に面白いです。

デモのキャプチャ

Howl's Moviing Castle

ハウルの動く城。HTMLもCSSもJavaScriptもかなりの大作です。

sponsors

top of page

©2018 coliss