jQueryで制御する基本的なスクロール量にあわせたフェードイン・フェードアップアニメーション

[ ID : 3243 ]
シルバー
jQueryで制御する基本的なスクロール量にあわせたフェードイン・フェードアップアニメーション

概要

スクロール量にあわせたフェードイン・フェードアップアニメーションの実装を紹介。

用途

  • スクロールに合わせたアニメーションを行なうための、発火処理を実装する。
  • 対象となるターゲット($elm)に特定のClassを付与する処理を発火トリガーとする。
  • アニメーションはターゲット($elm)と付与されるClassにCSSスタイルすることで制御する。

仕様

  • scrollAddClass(1elm, activeClass, threshold)の$elmを変えて複数指定することで複数パターンのアニメーション処理を実装できる。
  • scrollAddClass($elm, activeClass, threshold)は、scrollAddClass($('.js-fadein'), 'is-fadein', 100)のように使用し、以下の指定が可能。
    • $elmは発火ターゲットとなるClassを記載。例).js-fadein
    • activeClassは発火時に付与されるClassを記載。例)is-fadein
    • thresholdは発火タイミングを調整。例)プラスは発火のタイミングが遅くなり、マイナスはタイミングが早くなる。

検証ブラウザ

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

その他

  • jQuery v3.6.0使用。

実装方法

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

この記事をシェアする

関連記事

全ての記事を見る

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