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

完成です!

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

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

この記事をシェアする

関連記事

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    コーディング

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    コーディング

    制作

おすすめ記事

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

  • 2022.04.28

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

    その他

    制作

  • 2022.04.22

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

    デザイン

    制作

×