はじめに
使うもの
したいこと
- 下へのスクロール時に、該当コンテンツが画面内に登場したらそれをふわっと表示させたい
- 上へのスクロール時に、該当コンテンツが画面内に登場したらそれをふわっと表示させたい
→ 下スクロールの直後に上へのスクロールが行われても、また逆の場合にもふわっとさせるのを連続で行いたい
前提
- ふわっとさせる処理そのものは、Animate.cssのを用いる
- 該当コンテンツにいつAnimate.cssのクラスを付与するかをWaypoints.jsおよび自身のjsファイルに記述していく
考え方
- 上下のスクロール
- ifで条件分岐させる
- 下スクロールの直後に上へのスクロールが行われても、また逆の場合にもふわっとさせるのを連続で行いたい
- cssの追加や削除が必要
- 既に付与されているcssのクラスがある場合、それを削除してからでないと起動させたいクラスは動かない
→ ここの順番間違えると絶対うまくいかないと思われるので気をつけて下さい。記事主もここにハマりました。初歩的なことに躓き、悔しい限りでした。
表題の処理において学んだこと
今回は、上記「考え方」の二つ目に詰まりました。
- cssのクラスを付与する場所は同じ(同一の場所に相反するクラスを起動させると画面からコンテンツが消える)
- では、スクロールが感知された時点で付与されているcssのクラスは何か
検証にて確認したところで、クラスの削除が各分岐内で先に行わなければならないのか、と気づきました。
やりたいことと実際に動いているものの確認と、発動させるものの順序、これら基本的なところを忘れずにしようと思いました。
コード
こちらです。