【簡単】CSS でスクロールを促すラインアニメーションを作る方法

こんにちは！

今回は色々なサイトで見かける、スクロールを促すラインアニメーションを作る方法を解説していきます。

ちょっとしたテクニックですが、これがあるだけでスタイリッシュでイマドキなサイトに見えるのでぜひ真似してみてください。

HTML

まずはHTMLでscrollの文字をdivで囲います。

 <div class="scroll">
    <p>scroll</p>
 </div>

CSS

次にCSSです。

.scroll {
    position  : absolute;
    font-size : 13px;
    writing-mode : vertical-rl;
    top : 30%;
    left : 50%;
    transform: translateX(-50%) translateY(-50%);
}

writing-mode : vertical-rl; で文字を縦にしたり、文字の位置を整えたりしましたが、ここはサイトのデザインによって変えましょう。

次は疑似要素::afterで縦線を作ります。

.scroll::after {
    content : '';
    display : inline-block;
    position : absolute;
    background-color: #000;
    right : 50%;
    bottom : -115px;
    transform : translateX(-50%);
    width : 1px;
    height : 100px;
    animation: scroll 1.5s infinite;
}

最後の１行は「1.5秒かけておこなうスクロールを無限に繰り返す」という意味です。

キーフレーム

最後に肝心のキーフレームです。

@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%;
  }
}

transform: scale で縦線を拡大・縮小。

transform-origin で変形させる中心点を指定します。

See the Pen Untitled by hayashi (@hayashi_spiqa) on CodePen.

完成です！

いかがでしたでしょうか？

今回はシンプルなものでしたが、応用して色々なデザインのスクロールアニメーションを作ってみてください！

この記事をシェアする