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

2022/09/22

[ ID : 3243 ]

シルバー

概要

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

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