スクロール演出

スクロール演出に分類されるWeb表現技法15件。スクロールリビール、scroll-snapギャラリー、スクロール進捗バー、パララックス背景など。ライブデモとコピーできるコード付き。

IntersectionObserverで画面に入った要素を順番にフェードアップ表示します。LPやカードリストの登場演出に最適。

CSS scroll-snapで各スライドにピタッと吸着する横スワイプギャラリー。ドット連動で現在位置も表示します。

ページの読み進み度を上部バーと円形リングで可視化します。長文記事やブログの定番UX。

複数レイヤーをスクロール速度差で動かし奥行きを演出します。ヒーローセクションのビジュアルに。

position:stickyでビジュアルを固定したまま、スクロールに連動して中身を切り替えるストーリーテリングUI。

要素が画面に入った瞬間、実績数値を0からアニメーションで加算表示します。サービス紹介の統計に。

縦スクロール量をtransformで横移動に変換するピン留めセクション。ポートフォリオや工程紹介に映えます。

スクロール進捗に合わせて文章を単語ごとに点灯させ、読み手の視線を導きます。引用や物語の見せ場に。

スクロール量をrotateYに割り当て、カードを立体的に回転させます。CSS 3D transformの応用デモ。

内部スクロールに連動して左パネルは上へ、右パネルは下へと逆方向に動く分割画面。中央の境界線を境に視差が生まれ、対比のあるヒーローやストーリー導入に映えます。

スクロール進行で章（シーン）が切り替わり、背景色と見出しテキストがフェードで入れ替わる没入演出。3〜4シーンで物語のように読み進めるストーリーテリングUIです。

スクロール進行で中央の画像が小さなカードから全画面へとなめらかに拡大し、キャプションが浮かび上がるシネマティック演出。プロダクトやポートフォリオの見せ場に。

animation-timeline: view() を使い、JavaScript無しで複数カードをビューポート進入時にopacity+translateYで出現させます。@supportsでガードし非対応ブラウザでは普通に表示。

animation-timeline: scroll() で上部の進捗バーがスクロールに連動して伸びます。JavaScript無しで実装でき、長文記事の読了率表示に最適。

rAFでスクロール速度を算出し、速くスクロールするほど要素をskewY/scaleYで歪ませます。手を止めると線形補間でなめらかに元へ戻る慣性演出。