【SWELL】動きのある見出しデザインを、JavaScriptで実装してみる

ウェブデザイン初心者の私でも、
CSSで好きなデザインへカスタマイズできるようになってきました。

見出し＜h２＞のデザインはいつも迷っていますが、
現在は横線で区切るタイプの見出しを
採用しています。

以下はその見本です。

スクロールすると線が引かれる動きをつけたかったので、JavaScriptで実装してみることにしました。ちなみに、私はHTMLとCSSであればある程度は自分で記載できますが、JavaScriptは勉強中のため作文できません。

そのため、チャットGPTに頼んでみました。

私が聞いたのは下記のとおり。

スマホをスクロールして該当の箇所が画面に入ると横線を引くCSS

すごい雑な頼み方ですが、
それでもしっかり返事がきました。

スマホなどでスクロールして、ある要素が画面内に入ったときに横線（アンダーラインなど）を引くようにするには、以下のようなCSSとJavaScript（Intersection Observer）を組み合わせるのが一般的です。

おお、すごい。

さらにコードの説明として、

.underline-on-scroll：対象の見出しなどに付けるクラス。

::afterで疑似要素に横線を作り、初期状態では幅0%。

in-viewクラスが付くと、横線が100%に伸びて見えるアニメーションに。

Intersection Observerでスクロールして要素が画面に見えたときに in-view クラスを付加。

という丁寧な詳細があり、これをヒントに自分で調整しました。

JavaScriptは、外観＞テーマファイルエディター＞functions.phpへ書き込みました。

あまり動きすぎるデザインは好きではないですが、アクセントとして少しの動きが欲しい場面があります。痒い所に手が届くデザインができるように、JavaScriptも少しずつ覚えていきたいなと思いました。