CSS Web制作

スクロールを促すCSSアニメーションの作り方【スクロールダウン】

2024年3月1日

※ 当サイトではアフィリエイト広告を利用しています

スクロールを促すスクロールダウンってどうやって作るの？

ページを開いたら、ファーストビューに『下にスクロールして下さい』というアニメーションを実装することがあります。

これを『スクロールダウン』と呼びますが、今回はこのスクロールダウンの作り方を解説していきます。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

スクロールダウンとは？

スクロールダウンとは、表示されている画面を上から下へ移動させる（移動を促す）操作を指します。

これは訪問者が下部にあるコンテンツにも目を向けるよう促すために、視覚的なアニメーションや矢印が使われることが多いです。

 

スクロールダウンの実装方法

スクロールダウンを効果的に実装するためには、以下のようなアニメーションがよく使用されます。

  • 矢印アニメーション: 矢印が上下に動くことで、視覚的に下方向へのスクロールを促します。
  • 動くオブジェクト: 黒丸や波紋などの動くオブジェクトが、ユーザーの注意を引きつける役割を果たします。

今回は、7種類のスクロールダウンの実装方法を解説していきます。

また、HTMLとCSSのアニメーションだけで、jQueryやJavaScriptは使いません。

 

スクロールを促すCSSアニメーション（スクロールダウン）の作り方

スクロールダウンの種類は無限にありますが、今回はシンプルで使いやすい7種類をご紹介します。

 

共通となるHTMLのコード

HTMLの書き方は、共通でこちらです（最後のサンプルだけ文字無し）

<div class="scroll">
  <span>Scroll</span>
</div>

 

共通となるCSSアニメーションのコード

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種類ご紹介しました。

あまり目立つと催促しているようで気になる人もいると思うので、動きや大きさは控えめにするのがいいかと思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X（旧Twitter）フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-CSS, Web制作