ページを開いたら、ファーストビューに『下にスクロールして下さい』というアニメーションを実装することがあります。
これを『スクロールダウン』と呼びますが、今回はこのスクロールダウンの作り方を解説していきます。
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
スクロールを促すCSSアニメーション(スクロールダウン)の作り方
スクロールダウンの種類は無限にありますが、今回はシンプルで使いやすい7種類をご紹介します。
HTMLは共通でこちらです(最後だけ文字無し)
<div class="scroll">
<span>Scroll</span>
</div>
また、CSSのanimationプロパティに関しては、共通でこちらになります。
animation: scroll 2s infinite;
scroll
は@keyframes
で指定するアニメーション名、2s
は時間、そしてinfinite
は無限ループとなります。
これからご紹介するのは、CSSとデモになります。
上から下に流れる線①
/* スクロールダウンの位置 */
.scroll {
position: absolute;
right: 50%;
top: 10%;
writing-mode: vertical-rl;
}
/* 線のアニメーション部分 */
.scroll::before {
animation: scroll 2s infinite;
background-color: #000;
bottom: -115px;
content: "";
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 1px;
}
/* 線のアニメーション */
@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%;
}
}
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
上から下に流れる線②
/* スクロールダウンの位置 */
.scroll {
position: absolute;
right: 50%;
top: 10%;
writing-mode: vertical-rl;
}
/* 線のアニメーション部分 */
.scroll::before {
animation: scroll 2s infinite;
background-color: #000;
bottom: -115px;
content: "";
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 1px;
}
/* 線のアニメーション */
@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, 1);
transform-origin: 0 100%;
}
}
See the Pen
スクロールダウン④ by junpei (@junpei-sugiyama)
on CodePen.
上から下に流れる線(背景色あり①)
/* スクロールダウンの位置 */
.scroll {
position: absolute;
right: 50%;
top: 10%;
writing-mode: vertical-rl;
}
/* 線のアニメーション部分 */
.scroll::before {
animation: scroll 2s infinite;
background-color: #000;
bottom: -115px;
content: "";
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 1px;
z-index: 2;
}
/* 線の背景色 */
.scroll::after {
background-color: #ccc;
bottom: -115px;
content: "";
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 1px;
}
/* 線のアニメーション */
@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%;
}
}
See the Pen
スクロールダウン② by junpei (@junpei-sugiyama)
on CodePen.
上から下に流れる線(背景色あり②)
/* スクロールダウンの位置 */
.scroll {
position: absolute;
right: 50%;
top: 10%;
writing-mode: vertical-rl;
}
/* 線のアニメーション部分 */
.scroll::before {
animation: scroll 2s infinite;
background-color: #000;
bottom: -115px;
content: "";
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 1px;
z-index: 2;
}
/* 線の背景色 */
.scroll::after {
background-color: #ccc;
bottom: -115px;
content: "";
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 1px;
}
/* 線のアニメーション */
@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, 1);
transform-origin: 0 100%;
}
}
See the Pen
スクロールダウン⑤ by junpei (@junpei-sugiyama)
on CodePen.
矢印
/* スクロールダウンの位置 */
.scroll {
padding-top: 60px;
position: relative;
text-align: center;
}
/* 矢印のアニメーション部分 */
.scroll::before {
animation: scroll 2s infinite;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
content: "";
height: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px;
}
/* 矢印のアニメーション */
@keyframes scroll {
0% {
opacity: 0;
transform: rotate(-45deg) translate(0, 0);
}
40% {
opacity: 1;
}
80% {
opacity: 0;
transform: rotate(-45deg) translate(-20px, 20px);
}
100% {
opacity: 0;
}
}
See the Pen
スクロールダウン③ by junpei (@junpei-sugiyama)
on CodePen.
マウスアイコン
/* スクロールダウンの位置 */
.scroll {
margin-inline: auto;
margin-top: 30px;
position: relative;
width: fit-content;
}
/* マウスホイール */
.scroll::before {
animation: 2s scroll infinite;
background: #000;
border-radius: 3px;
content: "";
height: 10px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 4px;
}
/* マウス */
.scroll::after {
border: 2px solid #000;
border-radius: 20px;
content: "";
display: block;
height: 50px;
margin-inline: auto;
margin-top: 10px;
width: 30px;
}
/* アニメーション */
@keyframes scroll {
0% {
opacity: 0;
top: 40%;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
top: 70%;
}
}
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
矢印と波紋
/* スクロールダウンのスタイル */
.scroll {
border: 1px solid #000;
border-radius: 50%;
display: inline-block;
height: 50px;
margin-top: 50px;
position: relative;
width: 50px;
}
/* 矢印 */
.scroll span {
border-bottom: 1px solid #000;
border-left: 1px solid #000;
height: 10px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 33%;
transform: rotate(-45deg);
width: 10px;
}
/* アニメーション部分 */
.scroll::before {
animation: scroll 2s infinite;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(28, 180, 211, .5);
content: "";
height: 50px;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 50px;
}
/* アニメーション */
@keyframes scroll {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 20px rgba(28, 180, 211, .5);
opacity: 0;
}
100% {
opacity: 0;
}
}
/* 中央寄せ */
body {
text-align: center;
}
See the Pen
スクロールダウン⑦ by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回は、スクロールを促すCSSアニメーション、スクロールダウンを7種類ご紹介しました。
あまり目立つと催促しているようで気になる人もいると思うので、動きや大きさは控えめにするのがいいかと思います。
以上になります。