JavaScriptでスクロールと連動してアニメーションで下線を引く方法

このサイトは以前別の形でエンジニアブログとして運営していたのですが、その時の名残で結構検索からスクロールと連動して下線を引くコードを探しに来てくださる方がいるようです。せっかく来てみたら該当記事はなく、がっかりさせたままでもあれなので、改めて記事を書かせていただきます。

まずはサンプルをご覧ください。

コードは下記になります。

<!-- HTML -->

<div class="underline-Area">
	<p>こんにちは。このエリアではスクロールに連動してアンダーラインを引く方法を紹介します。</p>
	<p>必要なのは下線を設定するCSSと、スクロールと連動してCSSを付与するjavascriptになります。</p>
	<p>この行に近づくと……<span class="underline-before">ほらここにアンダーラインが引かれます。</span>.underline-beforeというセレクタにtransitionが設定されているので、アニメーションになります。</p>
	<p>せっかくなのでもう一度<span class="underline-before">ここにもアンダーラインが引かれます。</span></p>
</div>

/* CSS */

.underline-Area {
	  width: 50%;
	  min-width: 200px;
	  height: auto;
	  margin: 0;
	  padding: 20px;
	  border: 1px solid #333;
}

.underline-Area p {
	  margin: 60px auto;
}

.underline-before {

	background: linear-gradient(black, black) 0 100%/0 2px no-repeat;
	/*左から、カラー（始点と終点それぞれ同じものを指定）、position / サイズ横縦 繰り返しの有無 */

	transition: background 3s;
	/*トランジションの設定。下線を引く動きをアニメーションにするのに必要 */

	text-decoration: none;
	/*テキストの装飾の設定 */
}

.underline-after {
	background-size: 100% 2px;
  /* 変化後のスタイル。横サイズを0から100%に変えることで指定の文字列に下線を引く */
}

/* javascript */

let expantion = document.getElementsByClassName('underline-before');
// .underline-beforeのついたDOMを取得

let expantionswitch = ["off","off"];
// 下線を引くアクションを行ったか行ってないかのスイッチを配列の値で表現。初期値はoff

window.onscroll = function(){
// スクロールした場合、関数（function）を実行

for(let i = 0,len = expantion.length;i < len;i++){
// .underline-beforeの数だけ繰り返しするfor文

let ex_clientRect = expantion[i].getBoundingClientRect();
// [i]番目の.underline-beforeの境界ボックスを取得（画面内での.underline-beforeの位置を取得）


let wh = window.innerHeight;
// ブラウザのウインドウの表示領域の高さを取得。（ページの上からどれだけ進んだか計る）


if(wh > ex_clientRect.top + 200 && expantionswitch[i] === "off") {
// if文による分岐。もしウインドウの表示領域の高さが、[i]番目の.underline-beforeの画面内での上からの位置+200pxより
// 高かった場合。また、[i]番目のexpantionswitchがoffの場合にtrueの動作を返す。

expantion[i].classList.add('underline-after');
// [i]番目の.underline-beforeがついている要素に新たに.underline-afterを追加。これによって下線を引くアクションが実現する。

expantionswitch[i] = "on";
// offだった配列の値をonにする。これによって二度同じ動作をするのを防いでいる。
}
}
}

各.underline-beforeの近くの位置までスクロールしたところで、.underline-afterを付与する仕組みですね。簡単なコードなので、いろいろ応用も効くと思います。