特定の位置までスクロールしたときにアニメーションさせる

jQuery でスクロール位置を取得して、色々と仕掛けをしたい時の方法です。
scroll-switch-animation
まずはリンク先と、そのソースを見てみてください。

解説

  • 仕掛けをしたい要素に共通のクラス名「j-scroll-switch」をつけておく。
  • jQuery でスクロール位置と、要素の位置を比較して、要素が良い位置に来たところで「on」クラスを足す。
  • css で動かす場合は、transition か animation を使う。
  • jQuery で animate させたいなら、ごりごりとコードを書く。ループは setTimeout を再起的に呼ぶ

jQuery でもアニメーションできますが、css で動かす方が簡単だと思います。
jQuery には状態(スクロール量)の監視と、クラス名のコントロールだけをさせて、アニメーションは css で実装する、という役割分担の考え方です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA