スクロール促進矢印（縦バウンス）
ヒーローの下部に置く「Scroll」の合図で、細い縦線の中を光のドットが上から下へ繰り返し流れ落ちる演出です。JavaScript は不要で、 @keyframes による無限アニメーションだけで動きます。
解説
ヒーローの下部に置く「Scroll」の合図で、細い縦線の中を光のドットが上から下へ繰り返し流れ落ちる演出です。JavaScript は不要で、@keyframes による無限アニメーションだけで動きます。縦線は overflow: hidden の細い箱で、その中の光る要素を translateY で動かし、はみ出した部分を隠すことで、線の中を一定リズムで流れ続けるように見せています。「下にコンテンツが続く」ことを言葉に頼らず伝えられます。
こんなページに
- 画面いっぱいのファーストビューで、続きがあると気づかせたいとき
- 縦長の1ページ構成サイトで、スクロールを自然に促したいとき
流れる速さはアニメーションの秒数で、線の長さは縦線の height で調整できます。色は背景に合わせて変えてください。例は濃い紺の背景に白い光で映える設定です。注意点として、ずっと動き続ける演出のため、動きに敏感な利用者に配慮し、prefers-reduced-motion が有効なときはアニメーションを止め、矢印や線を静止表示にしておくと安心です。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
落ちるドットの速さや色は変えられますか？
変えられます。速さはアニメーションに指定した秒数で、色は光る要素のグラデーションの色で調整できます。背景の明るさに合わせて見やすい色を選んでください。
ずっと動き続けますが負荷は大きいですか？
transform を使った軽い動きなので負荷はごくわずかです。気になる場合や動きが苦手な利用者向けには、prefers-reduced-motion で動きを止める指定を加えると配慮できます。