新鮮なアイデアが満載!アニメーションやスクロールを使った実装テクニックのまとめ

見るだけでワクワクする、そんな素晴らしいアイデアが満載のアニメーションやスクロールを使った実装テクニックをCodePenから紹介します。

CSSアニメーションとかスクロールエフェクトとか、新鮮なアイデアが満載!

各デモのコードを見たい時は、下部の「Edit this Pen」をクリックするとコードが表示されます。

デモのキャプチャ

Apple iMac scrolling effect.

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

デモのキャプチャ

One page scroll navigation

縦長1ページ用の新しいタイプのナビゲーション、パネルが次々にアニメーションで表示されます。

デモのキャプチャ

Full Screen Nav

スクリーン全体を使ったダイナミックなナビゲーション。

デモのキャプチャ

Fade Out Paragraph

美しいグラデーションを使って、パラグラフをフェードアウトで表示。

デモのキャプチャ

Shell with Dots

背景に使った画像にドットを加えて、良質な質感を与えます。

デモのキャプチャ

Material Design Sidebar

Material Designスタイルのサイドバー。コンテンツに重ねたり、フロートさせたりできます。

デモのキャプチャ

Quad Split

コンテンツを「Quad」4つに分割してスクロールさせます。

デモのキャプチャ

Experimental Layout

斜めに配置されたエレメントを使った新しいタイプのアコーディオンの実験的なデモ。

デモのキャプチャ

CSS Traiangle Image Crop

画像を三角形にクロップし、連続して配置して、ホバーでふわりとさせます。

デモのキャプチャ

Button Styles

フラットでよく使われるゴーストスタイルのボタン、このホバーエフェクトはクリック率あがりそう。

デモのキャプチャ

Blurred Background CSS

背景のコンテンツを美しいブラーエフェクトで見せたパネル。パネルはドラッグで移動もできます。実装のアイデアが面白い!

sponsors

top of page

©2018 coliss