スクロール演出の名前と動きを見返すために、HTMLの図鑑を作った

セクション見出しにフェードインを付けてください。要素が画面内に30%入った時に、opacityを0から1へ800ms・ease-outで変化させます。位置は動かさず、初回だけ再生してください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

説明パネルを左からスライドインさせてください。画面内に30%入ったらtranslateX(-64px)から0へ700ms・ease-outで移動させます。透明度は変えず、初回だけ再生してください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

4枚の特徴カードをスタッガー表示してください。グループが画面に入ったら左から順に120msずつ遅らせ、各カードを下16px・opacity 0から500msで表示します。全体を1秒程度で完了し、初回だけ再生してください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

「動きには、意味がある。」を文字単位のテキストリビールで表示してください。各文字をクリップ領域の下からtranslateY(110%)→0へ650ms、65msずつの時間差で立ち上げます。読み上げでは文章を一度だけ読める構造にしてください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

写真を左から右へのマスクリビールで表示してください。画像の位置は固定し、clip-pathをinset(0 100% 0 0)からinset(0 0 0 0)へ1,000ms・ease-in-outで変化させます。画像が読み込まれてから初回のみ再生してください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

ブランドコピーにブラーインを付けてください。位置は固定し、filter: blur(16px)とopacity: 0から、blur(0)とopacity: 1へ1,000msで変化させます。長文には適用せず、初回だけ再生してください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

「アイデアを、かたちに。」をタイプライター表示してください。90msごとに一文字ずつ追加し、削除やループは行いません。表示領域の高さを先に確保し、読み上げ用には完成した文章を一度だけ提供してください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

実績数にカウントアップを付けてください。表示検知後、0から提供データの最終値まで1,600msで増加し、終盤は減速させます。桁区切りと固定幅の数字を使い、初回のみ再生してください。最終値を捏造せず、読み上げでは最終値だけを伝えてください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

記事の上部にスクロール連動の読了バーを付けてください。記事のスクロール可能距離に対する現在位置を0〜1へ正規化し、バーの幅に対応させます。スクロールを止めれば進行も止まり、上へ戻せばバーも戻る仕様にしてください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

キービジュアルに控えめなパララックスを付けてください。対象区間のスクロール進行に対し、奥のレイヤーを上18px、中景を48px、手前を92px移動させ、本文は固定します。端に余白が露出しない素材サイズにし、動きの低減時は静止画にしてください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

画像をスクロールズームさせてください。対象区間の開始時は表示枠の55%の大きさ、終了時は100%になるようscaleを連続補間します。中央を基準に拡大し、重要な被写体が切れないよう調整してください。低減時は最終サイズの静止画を表示します。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

提供する連番画像を画像シーケンスとしてスクロール再生してください。区間の0〜100%をフレーム番号に対応させ、逆スクロールで逆再生します。先読み・画像欠落時の代替表示・容量制限を設計し、低減時は代表フレームを表示してください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

図解のSVGパスをスクロールに合わせて描画してください。pathLengthを100に正規化し、stroke-dasharray: 100、stroke-dashoffset: 100から0へ変化させます。上へ戻すと線も戻し、低減時は完成した線を表示してください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

短いブランドメッセージにテキストフィルを付けてください。スクロール進行に応じ、文章の先頭から末尾へ文字色を濃くします。複数行でも読む順に進め、未強調文字の可読性を確保してください。低減時は全文を強調色で表示します。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

章の進行に合わせて背景色をピーチ、淡いブルー、ミントへ連続的に補間してください。文字色は暗色で統一し、中間色を含めて可読性を確認します。対象セクションだけに適用し、低減時は一色の背景にしてください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

装飾用の語句列をマーキー表示してください。通常は40px/秒で横に流し、スクロール速度に応じて一時的に加速し、上限180px/秒を設けます。停止ボタンと静止表示を用意し、複製列は読み上げ対象から外してください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

各章の見出しをposition: sticky; top: 0で上端に残してください。章の本文がスクロールしている間だけ固定し、次の章に入ると見出しが切り替わるよう、章ごとに親要素を分けます。固定見出しで本文やフォーカスを隠さないでください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

商品説明をピン留め＋スクラブにしてください。対象区間だけ表示枠を固定し、スクロール進行で内部の部品を分解表示します。固定する枠自体はアニメーションせず、子要素だけを動かしてください。区間終了後は固定を解除し、低減時は静的な説明へ切り替えます。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

3章の説明文と固定ビジュアルを組み合わせたスクロールテリングを作ってください。現在読んでいる章に合わせて隣の図を切り替え、文章と図の対応を章番号でも示します。狭い画面や動きの低減時は、文章と対応図を順番に読める構成にしてください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

3枚の工程カードをスクロールで積み重なるカードスタックにしてください。各カードをstickyにし、上端の固定位置を12pxずつずらして前のカードの端を残します。読み順と重なり順を一致させ、低減時は重ねず縦に並べてください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

短い3枚の紹介パネルにCSS scroll snapを設定してください。専用スクロール枠だけにscroll-snap-type: y mandatory、各パネルにscroll-snap-align: startを指定します。本文が画面高を超える場合はスナップを弱めるか解除し、キーボードでも移動できるようにしてください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

作品ギャラリーに縦スクロールを横移動へ変換する演出を付けてください。対象区間では枠を固定し、トラックの横幅から表示枠を引いた距離だけ横へ移動します。ページ全体のホイール操作は奪わず、モバイルや低減時は通常の横スワイプまたは縦並びへ切り替えてください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

ヘッダーを下スクロールで隠し、上スクロールで再表示してください。方向ごとの累積移動が8pxを超えた時だけ切り替え、180msで移動させます。ページ最上部、メニュー展開中、ヘッダー内にキーボードフォーカスがある間は表示を維持してください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。

目次にスクロールスパイを実装してください。現在読んでいる章に対応する目次項目を強調し、色に加えて太字・マーカーとaria-currentで示します。目次から章へ移動できるようにし、最初と最後の章、逆スクロール、画面サイズ変更でも選択が一致するか確認してください。

コピー時は「外部CDN不要・動きの低減・キーボード・狭い画面への対応」の共通条件も付加します。