CODEPENの2015年TOP 100から気になったのをピックアップしてみた

2015年のCODEPEN TOP100というのが発表されてました。TOP100全部にザッと目を通して実用的かな？と思ったものを挙げていきます。

TOP 98: One page scroll with depth effect (?)

動きは逆の方（奥へ進む感じ）が良かったんじゃないかと思ったり。

TOP 90: Simple Tile Hover Effect

詳細部分の背景が塗りつぶしじゃなくてちゃんとlinear-gradientを使っていていい感じです。

TOP 84: Menu 1

ハンバーガーメニューをタップするとメニューがブワッと広がります。jQueryを使ってますが基本的にクラスの付け替えだけなので重くならなそうです。

TOP 82: Modal Animations

頻繁に表示されるモーダルに使うとうるさすぎます。一回きりとかのモーダルならアクセントになりそうです。

TOP 77: Curved Cut

SVGを使って曲線を動かしてます。ページのヘッダー部とかで使うといい感じになりそうです。ただしscroll/resizeイベントを拾ってheightをいじったりしてるのでデスクトップ限定になりそうです（スマホだと負荷が高そう）。

TOP 75: Rotating Icon Buttons

SVGアイコンとかでもこのアイデアは使えそうです。

TOP 73: Navigation Animation

グローバルナビゲーションで使用できる、before/after擬似要素を使ったアニメーションです。一番最後のテキストの色を反転させるやつがいい感じです。

TOP 59: angular interactive box-model diagram

ボックスモデルを知らない人に『ボックスモデルとは』ということを教えるのに必須の教材になりそうなくらい出来がいいです。これをいじってればボックスモデルなんてすぐに理解できるでしょう。

TOP 40: Responsive Accordion

hoverすると画像が広がって中のテキスト表示されます。画面いっぱいに使うと結構インパクトあります。

TOP 37: Expanding Column Layout

TOP 40と似ていますが、こちらはクリックすると画面全体が覆い尽くされます。レスポンシブにもなっていてスマホだと縦にリストされます。いちいちクリックしないと中のコンテンツが見れないので使いどころは限られますが…

TOP 36: FullScreen drag-slider with parallax

左右のスワイプでコンテンツを切り替えていきます。このままだとモバイルはいいんですが、デスクトップで使いにくいです（mousemoveしないといけない）。でもデスクトップの場合はwheelイベントにページ移動を登録すると普通に使えそうな気がします。

TOP 25: Add to cart interaction

完成度高くてビビります。とりあえず触ってください。

TOP 2: pen#PwLXXP

これは多分実用的ではありません。ただページを開いて見ていてください。