【簡単】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行は「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.

完成です!

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

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

この記事をシェアする

関連記事

  • 2022.11.15

    Wordpressで多言語対応をする方法

    制作

    コーディング

  • 2022.10.24

    超簡単!?たった15分でカウントダウンを作成する方法

    コーディング

    制作

  • 2022.09.15

    【初心者向け】アクセス解析の用語をまとめて解説!

    ディレクション

    制作

おすすめ記事

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 2022.06.30

    【作業のお供に!】おすすめ深夜ラジオ3選

    社員ブログ

×