こんにちは！さこちゃんです。
今回は「スクロールを促すスクロールダウンアニメーションの作り方」についてです。
いろんなWebサイトでよく見る、スクロールを促すやつってどうやって作るの？
jQueryはご不要！CSSアニメーションだけで簡単に実装できるんだよ〜
デモ確認
デモはこちら。
「Scroll」の文字をCSSで調整。スクロールを促す縦線の動きはCSSアニメーションで調整しています。
HTML構造を作る
HTMLはこちらです。と〜ても簡単。
<body>
<div class="allwrap">
<div class="scrolldown"><span>Scroll</span></div>
</div>
</body> CSSを書く
次にCSSを書きます。コードはこちらです。
/*レイアウト調整のための記述*/
.allwrap {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #3c3c3c;
}
/*Scrollの位置調整*/
.scrolldown {
position: absolute;
width: 10%;
height: 18%;
bottom: 0;
left: 50%;
transform: translateX(-50%);
color: #FFF;
text-align: center;
}
/*Scrollを促す縦線*/
.scrolldown span::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 5.0rem;
background: #FFF;
animation: scroll 2s ease-in-out infinite;
}
/*アニメーション*/
@keyframes scroll {
0% {
transform: scale(1, 0);
transform-origin: 0 0;
}
50% {
transform: scale(1, 1);
transform-origin: 0 0;
}
51% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
100% {
transform: scale(1, 0);
transform-origin: 0 100%;
}
}アニメーションの解説
今回のアニメーションは、縦線が上から下に伸びて、下から上に縮むように見せています。
整理するとこんな感じです。
| 時間 | transform | transform-origin | 解説 |
| 0% | scale(1, 0) | 0 0（上から） | 縦線が上から「ゼロの長さ」で開始。 |
| 50% | scale(1, 1) | 0 0（上から） | 縦線が上から下に「伸びて」くる。 |
| 51% | scale(1, 1) | 0 100%（下から） | 転換点：今度は下から縮ませる準備。 |
| 100% | scale(1, 0) | 0 100%（下から） | 縦線が下から上に「縮んで」消える。 |
追記：スマホブラウザで閲覧時に、ツールバーに隠れてしまう場合の対処法
スマホブラウザで確認すると、下図のようにスクロール表示がツールバーに隠れて見えなくなってしまう場合があります。
原因は、allwrap に height:100vh; を使用しているためです。height:100vh; を使用すると、実際の表示領域がツールバーを含めた高さで計算されてしまうのです。
その結果、画面下に固定表示された要素が見切れてしまいます。
この場合、JSを使って高さを計測することで解決可能ですが、CSSで対処する方法が簡単でおすすめです。
allwrapに指定していたCSSの記述に「max-height: 100dvh;」を追記しましょう。
/*レイアウト調整のための記述*/
.allwrap {
position: relative;
width: 100%;
height: 100vh;
max-height: 100dvh; // 追記
display: flex;
justify-content: center;
align-items: center;
background: #3c3c3c;
}これでツールバーの上にスクロールが表示されるようになります。
dvh とは？
vhはビューポート全体の高さを意味しますが、スマホブラウザで閲覧時、アドレスバーやツールバーの高さを含みます。
一方dvhは、実際に表示されている領域の高さ、つまりツールバーを除いた高さを指します。
ちなみにdvhは dynamic viewport height の略です。
ただdvhは比較的新しいCSSの仕様です。
iOS 15+, Android Chrome 108+, Safari 15.4+ 以降で対応しており、古い端末には非対応なので、フォールバックと併用するのがベターです。
おわりに
いかがでしょうか？
今回は、スクロールを促すスクロールダウンアニメーションの作り方について解説しました。
CSSアニメーションだけで手軽に再現できるのが便利ですね。
ぜひ参考にしてみてください！