今回はWEBサイトのファーストビューでよく見られるscrollを促すアニメーションの作り方を紹介します。

コピペできるので、是非真似してコーディングしてみてください！

【CSS】scrollを促すアニメーションの作り方

完成形はこちら。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

scrollを促すアニメーションがあることで、ユーザーに下へスクロールできることを伝えることができます。

それでは早速作っていきましょう！

HTML

<!-- 背景画像 -->
<div class="first-v">
    <div class="scroll">
        <a href="">scroll</a>
    </div>
</div>

CSS

/* 背景画像 */
.first-v {
    position: relative;
    overflow: hidden;
    background-color: pink;
    height: 100vh;
}
/* scroll */
.scroll {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    min-width: 15px;
    margin: 0 auto;
}
.scroll a {
    display: inline-block;
    letter-spacing: normal;
    font-size: 1.8rem;
    color: #fff;
    writing-mode: vertical-lr;
    margin: 0 auto;
    text-decoration: none;
}
.scroll a::before {
    content: "";
    display: block;
    position: absolute;
    top: 85px;
    right: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    width: 3px;
    height: 100px;
    background-color: #fff;
    animation: scroll 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

/* scrollアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

◎2行目〜7行目

背景画像を高さ100vhにして、背景画像をつけます。

◎9行目〜17行目

scroll要素に対して「position: absolute;」を指定して絶対配置にします。

◎18行目〜26行目

aタグをインラインブロック要素にします。

そして「writing–mode: vertical–lr;」でscrollの文字を縦にします。

◎27行目〜40行目

擬似要素でアニメーションの線を実装していきます。

そしてanimationプロパティでscrollといった名前のアニメーションを指定します。

scrollのアニメーションは後で作成していきます。

◎43行目〜60行目

scrollといった名前のアニメーションを作成しました。

0％・50％・50.1％・100％の時の挙動をCSSで細かく指定していきます。

まとめ

以上が、scrollを促すアニメーションの作り方でした。