jQuery でスクロール位置を取得して、色々と仕掛けをしたい時の方法です。
scroll-switch-animation
まずはリンク先と、そのソースを見てみてください。
解説
- 仕掛けをしたい要素に共通のクラス名「j-scroll-switch」をつけておく。
- jQuery でスクロール位置と、要素の位置を比較して、要素が良い位置に来たところで「on」クラスを足す。
- css で動かす場合は、transition か animation を使う。
- jQuery で animate させたいなら、ごりごりとコードを書く。ループは setTimeout を再起的に呼ぶ
jQuery でもアニメーションできますが、css で動かす方が簡単だと思います。
jQuery には状態（スクロール量）の監視と、クラス名のコントロールだけをさせて、アニメーションは css で実装する、という役割分担の考え方です。