概要
スクロール量にあわせたフェードイン・フェードアップアニメーションの実装を紹介。用途
- スクロールに合わせたアニメーションを行なうための、発火処理を実装する。
- 対象となるターゲット（$elm）に特定のClassを付与する処理を発火トリガーとする。
- アニメーションはターゲット（$elm）と付与されるClassにCSSスタイルすることで制御する。
仕様
scrollAddClass(1elm, activeClass, threshold)の$elmを変えて複数指定することで複数パターンのアニメーション処理を実装できる。scrollAddClass($elm, activeClass, threshold)は、scrollAddClass($('.js-fadein'), 'is-fadein', 100)のように使用し、以下の指定が可能。$elmは発火ターゲットとなるClassを記載。例）.js-fadeinactiveClassは発火時に付与されるClassを記載。例）is-fadeinthresholdは発火タイミングを調整。例）プラスは発火のタイミングが遅くなり、マイナスはタイミングが早くなる。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
その他
- jQuery v3.6.0使用。
実装方法
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
