CSS Web制作

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

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

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

スクロールを促す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種類ご紹介しました。

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

以上になります。

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

 

  • この記事を書いた人

じゅんぺい

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

-CSS, Web制作