新鮮なアイデアが満載!アニメーションやスクロールを使った実装テクニックのまとめ
Post on:2014年10月21日
見るだけでワクワクする、そんな素晴らしいアイデアが満載のアニメーションやスクロールを使った実装テクニックをCodePenから紹介します。
![CSSアニメーションとかスクロールエフェクトとか、新鮮なアイデアが満載!](http://coliss.com/wp-content/uploads-201404/2014102101.png)
各デモのコードを見たい時は、下部の「Edit this Pen」をクリックするとコードが表示されます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014102101-01.png)
iMac Retinaの5Kディスプレイモデルのページエフェクトを再現したデモ。全面に描画された画像をズームアウトしてiMacのディスプレイを表示します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014102101-02.png)
縦長1ページ用の新しいタイプのナビゲーション、パネルが次々にアニメーションで表示されます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014102101-03.png)
スクリーン全体を使ったダイナミックなナビゲーション。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014102101-04.png)
美しいグラデーションを使って、パラグラフをフェードアウトで表示。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014102101-05.png)
背景に使った画像にドットを加えて、良質な質感を与えます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014102101-06.png)
Material Designスタイルのサイドバー。コンテンツに重ねたり、フロートさせたりできます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014102101-07.png)
コンテンツを「Quad」4つに分割してスクロールさせます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014102101-08.png)
斜めに配置されたエレメントを使った新しいタイプのアコーディオンの実験的なデモ。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014102101-09.png)
画像を三角形にクロップし、連続して配置して、ホバーでふわりとさせます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014102101-10.png)
フラットでよく使われるゴーストスタイルのボタン、このホバーエフェクトはクリック率あがりそう。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014102101-11.png)
背景のコンテンツを美しいブラーエフェクトで見せたパネル。パネルはドラッグで移動もできます。実装のアイデアが面白い!
sponsors