- 2023.03.06
- CSS
- GIV_wataru
縦線をCSSアニメーションで伸ばす方法
会社の歴史やサービスの工程などを説明するときに、お客さんの目線を動かすために縦線を使うことがありますよね。

そんな縦線ですが下記の動画のようにアニメーションで動かすと、ユーザーの目線をよりひきつけられます。
ということで今回は縦線をアニメーションで表示させる方法について解説します。
縦線を作る
まずは縦線の作り方から説明します。
<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」のことで、対象の要素に触れるとその要素に動きをつけられます。これを使ってスクロールして線の枠に触れたら、線を表示させることが可能になります。
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(ホームページ)制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。