アンダーラインのアニメーション表示について教えてください。

Question

このページを開いた時、「これから起業・副業したい個人がマーケティングスキルを身につけて」の部分に
黄色のアンダーラインが左から右にアニメーション表示されるのですが、これはどのようにすれば実現できるのでしょうか。
↓
https://okutaro.jp/?p=1175

ホバー時に同様の表示が行われる例は、検索すると沢山出てくるのですが、
ホバーせずにこの表示を行う方法を教えて頂けないでしょうか。

よろしくお願いいたします。

Answer 1

https://okutaro.jp/?p=1175

提示されていたサイトのjavascriptとCSSを抜き出してサンプル作成してみました。
参考になればと思います。
https://codepen.io/SE-studying-now/pen/MPgpGq

Comments

[tack001]

ありがとうございます。
大変に参考になりました。

Answer 2

cssの記述方法はhoverでアニメーションする方法と同じです。

上記ページはページをスクロールすることで特定位置に来たときにその要素に対してclassを付与することで
実装しているようです。

なのでjavascriptを使いscrollの特定位置に来たときに
マーカーのアニメーションをしたい部分にclassを追加

そのクラスがつい場合にcssでアニメーションする

という処理をすれば実装できるかと思います。

Comments

[tack001]

ありがとうございます。
やってみます。

Answer 3

https://gurio.work/marker-animation01/

スクロールアニメですね。

Comments

[tack001]

ありがとうございます。
スクロールアニメというのですね。勉強になりました。

[hectopascal1013]

https://coliss.com/articles/build-websites/operation/javascript/animate-on-scroll-library-scrollout.html

ちょうどいまコリスさんの方でご紹介ありました。
テキストの他にも写真などギャラリーにも使える仕様です。
Appleがホームページで始めた手法が流行り出した感じでしょうね。
デザインのワンエッセンスとして。