CSS Web制作

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

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

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

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

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

 

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

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

スクロールを促す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）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
【独学・未経験者向け】Web制作で稼ぎたい人におすすめの教材をジャンル別に厳選紹介！
【独学・未経験者向け】Web制作で稼ぎたい人におすすめの教材をジャンル別に厳選紹介！

続きを見る

また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
フリーランスWeb系エンジニア・デザイナーの案件獲得・営業におすすめのサービスまとめ
フリーランスWeb系エンジニア・デザイナーの案件獲得・営業におすすめのサービスまとめ

続きを見る

この記事を参考にスキルと営業力を身につけて稼げるようになりましょう！

-CSS, Web制作