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