スクロール誘導バウンス矢印
ページ下部などに置き、上下にぴょこぴょこ跳ねて「下へスクロールできる」と促す矢印です。 SCROLL の文字と下向き矢印を縦に並べ、矢印に @keyframes のアニメーションを当てています。
解説
ページ下部などに置き、上下にぴょこぴょこ跳ねて「下へスクロールできる」と促す矢印です。SCROLL の文字と下向き矢印を縦に並べ、矢印に @keyframes のアニメーションを当てています。動きの途中で translateY で少し下へ移動しつつ opacity を下げ、また戻ることで、跳ねながら薄くなる柔らかなリズムを作っています。ease-in-out と infinite で滑らかに繰り返されます。CSSのみで成立し、JavaScriptは不要です。
向いている場面
- 第一画面いっぱいのヒーローで続きへ誘導する
- 縦長のランディングページの導入部
- 全画面の動画や写真の下に添える案内
跳ねる幅や速さは translateY の値と animation の秒数で調整できます。矢印は文字記号でもアイコンでも差し替えられ、暗い背景なら明るい色がよく映えます。注意点として、ずっと動き続けるため 主役のコンテンツより目立たせない 控えめなサイズと不透明度に抑えると上品です。動きが苦手な利用者には prefers-reduced-motion でアニメーションを止め、矢印だけ静かに置く配慮ができます。スクロールできることが他の手がかりからも分かるよう、これ単体に頼りすぎないのが安全です。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
跳ねる幅や速さは調整できますか
調整できます。アニメーション内のtranslateYの値を変えると跳ねる幅が、animationの秒数を変えると速さが変わります。秒数を長くするとゆったり、短くするとせわしなく動きます。控えめな幅にすると上品に見えます。
矢印の記号やデザインは変えられますか
変えられます。例では下向きの文字記号を使っていますが、別の記号やインラインのSVGアイコンに差し替えても同じ跳ねる動きが当たります。背景が暗い場合は明るい色にすると視認性が上がります。