スクロールに合わせてテキストが１文字ずつ順番にフェードインするアニメーション

概要

用途・要件

• スクロールして対象要素が画面の特定位置まで到達したら、アニメーション発火用のクラスを付与。
• 対象要素のテキストを１文字ずつspanで囲み、transition-delayをずらして設定することで順番にフェードインさせる。
• 「txtsFadeUp($elm, delayTime);」のように $elm（ターゲット要素） と delayTime（ディレイタイム(秒)）を設定して使用する。
• scrollイベントを使用。
• 注意）DEMOではiframe内のwindowの高さが取得できず正常に動作しておりません。

検証ブラウザ

• Google Chrome(最新)
• Safari(最新)
• Firefox(最新)
• Microsoft Edge(最新)
• IE11

その他

• jQuery v3.6.0使用。

実装