つぶやき
-ブログ-

縦線をCSSアニメーションで伸ばす方法

2023年3月6日

会社の歴史やサービスの工程などを説明するときに、お客さんの目線を動かすために縦線を使うことがありますよね。

そんな縦線ですが下記の動画のようにアニメーションで動かすと、ユーザーの目線をよりひきつけられます。

ということで今回は縦線をアニメーションで表示させる方法について解説します。

縦線を作る

まずは縦線の作り方から説明します。

<td class="yellow_circle">●
     <div class="yellow_circle_line"></div>
 </td>

今回は丸に線をくっつけたかったので、丸にposition : relative;を設定して、線にposition : absoluteを設定します。heightを0にしていますが、後でcssアニメーションで高さを伸ばす記述をするので、ひとまず数値を0にしています。

 .yellow_circle {
   position : relative;
   color    : #C69436;
   font-size: 16px;

    .yellow_circle_line {
       content          : "";
     　height           : 0px;
       width            : 2px;
       background-color : #C69436;
       position         : absolute;
       top              : 6px;
     　left             : 50%;
       transform        : translateX(-50%);
       -webkit-transform: translateX(-50%);
       -ms-transform    : translateX(-50%);

                        }

                    }

線が伸びるアニメーションを作成する

線が伸びるアニメーションはCSSアニメーションを使って実装します。

.yellow_circle_line {
    height: 0px;
}

.yellow_circle_line.active {
    height   : 300px;
    animation: yellow_circle 2.0s forwards linear;
}

@keyframes yellow_circle {
    0% {
        height: 0px;
    }

    100% {
        height: 300px;
    }
}

今回はjavascriptを使って、線を表示させるactiveクラスを付与するので、actibeクラスには線の全長である300pxを設定します。

そしてcssアニメーションですが、2秒後に線が伸びきったようにしたいので100%にheight：300pxと記述しています。これで線が伸びるようになります。

intersection observer apiを使ってスクロール到達時に表示させる

これまで線を伸ばすアニメーションを作りましたが、これだけでは不十分です。このままだとスクロールしない状態でも線が伸びてしまうからです。そのためユーザーがスクロールした際に、線を表示する→線を伸ばす動きを実装する必要があります。

そこで今回は「intersection observer api」を使って、スクロールした際に線を表示する方法を解説します。intersection observer apiとは「交差オブザーバー API」のことで、対象の要素に触れるとその要素に動きをつけられます。これを使ってスクロールして線の枠に触れたら、線を表示させることが可能になります。

交差オブザーバー API – Web API | MDN

intersection observer apiを使ったjavascriptの記述は下記のとおりになります。

  //着火点になる要素
    const fadeInLine = document.querySelectorAll(".yellow_circle_line");

    //オプションの設定
    const options = {
        rootMargin: '0px',　//着火点になる要素の余白を設定できる
        threshold: 0,　　　 //着火点になる要素がどのくらいの表示割合で、表示されるかの割合を設定できる
    };

    //intersection observer apiを呼び出す
    const observer = new IntersectionObserver(showElement, options);



    //.fadeIn_lineクラスに到達したらintersection observer apiを実行する
    fadeInLine.forEach((fadeInLine) => {
        observer.observe(fadeInLine);
    });

    //要素が表示した後の処理
    function showElement(entries) {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {

                entry.target.classList.add("active");
            }
        });
    }

rootMarginは着火点になる要素の余白を設定できます。(top, right, bottom, left)というようにcssのmarginと同じように数値を自在に設定できます。例えばtopを300pxに設定すれば、着火点になる要素の上300pxに触れると縦線が表示されます。ちょっと上から表示させたいときに使いましょう。

thresholdは着火点になる要素の割合を設定できます。 [0, 0.25, 0.5, 0.75, 1]というように25%刻みに数値を設定できます。例えば「0.5」を設定すれば、要素の半分に触れると要素が表示されるという設定ができます。

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。

前の記事へ

次の記事へ

一覧へ戻る

つぶやき-ブログ-

縦線をCSSアニメーションで伸ばす方法

縦線を作る

線が伸びるアニメーションを作成する

intersection observer apiを使ってスクロール到達時に表示させる

つぶやき
-ブログ-