スクロールに合わせてテキストが1文字ずつ順番に下からフェードアップするアニメーション

[ ID : 4885 ]
シルバー
スクロールに合わせてテキストが1文字ずつ順番に下からフェードアップするアニメーション

概要

【jQuery】スクロールして対象要素が画面の特定位置まで到達したら、テキストが1文字ずつ順番に下からフェードアップするアニメーションをjQueryで実装する方法を紹介。

用途・要件

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

検証ブラウザ

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

その他

  • jQuery v3.6.0使用。

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録