jquery - スクロールダウン時に要素の背景画像を5回変更する

Question

あるスライドに到達するとそのスライドで停止しますが、下にスクロールし続けると要素の背景画像が変化し続けるように、ページにスクロールダウン効果を持たせたいと思います。私はscrolldeck.jsを見ていますhttp://johnpolacek.github.io/scrolldeck.js/decks/responsive/

これを行うには、スクロールした量に応じてクラスを削除/追加する方法がわかりません。手がかりはありますか？ありがとう！

Answer 1

ウィンドウ スクロールを使用して、どの画像をいつ表示するかを決定できます。簡単な例。

var currentUrl = null;
var imageControl = function( event ) {
   var fromTop = $(window).scrollTop(), // The distance from the top of the page
       url = null;

   if(fromTop < 2000) {
     url = 'http://placehold.it/1000/FF0';
   } else if (fromTop > 2000) {
     url = 'http://placehold.it/1000/F00';
   }

   if(url !== currentUrl) {
      $('body').css('background', 'url(' + url + ')');
      currentUrl = url;
   }
};

$(window).scroll(imageControl);

デモ: http://jsfiddle.net/2Pfsy/

これを大幅に改善して、必要のないときにこのコードを実行しないようにすることができます....