スクロール時にページの背景色を変更します。

Question

特定のポイントまでスクロールするときに、Webページの背景色を黒から白に変更しようとしています。その後、スクロールして元に戻し、プロセスを繰り返します。特定のポイントまでスクロールするとブロックにクラスを追加するコードがありますが、背景色を変更することはできません。ここではjQueryのは、次のとおりです。

<script> 
    $(window).scroll(function() { 

     $('#block-yui_3_17_2_32_1488831533357_14601').each(function() { 

      var topOfWindow = $(window).scrollTop(), 

       bottomOfWindow = topOfWindow + $(window).height(); 

      var imagePos = $(this).offset().top; 

      if (imagePos <= bottomOfWindow - 100 && imagePos >= topOfWindow - 250) { 

       $(this).addClass('color Change'); 

      } else { 

       $(this).removeClass('colorChange'); 

      } 

     }); 

    }); 
</script> 

そして、ここでは、CSSです：

.colorChange { 
    #page { 
     background-color: white; 
     animation-name: colorChange; 
     -webkit-animation-name: colorChange; 

     animation-duration: 2s; 
     -webkit-animation-duration: 2s; 

     animation-timing-function: ease; 
     -webkit-animation-timing-function: ease; 

     animation-iteration-count: 1; 
     -webkit-animation-iteration-count: 1; 

     visibility: visible !important; 
    } 
} 

@keyframes colorChange { 
    0% { 
     background-color: white; 
    } 
    100% { 
     background-color: black; 
    } 
} 

@-webkit-keyframes colorChange { 
    0% { 
     background-color: white; 
    } 
    100% { 
     background-color: black; 
    } 
} 

編集：私は、ステートメントの代わりに色が変化するクラスを追加するのスクロール位置の色を変更する場合は変更してみましたしかしそれはうまくいかなかった。また、このように色の変化をどのように簡単に追加できますか？ここでは、編集されたコードは次のとおりです。

<script> 
    $(window).scroll(function() { 

     $('#block-yui_3_17_2_32_1488831533357_14601').each(function() { 

      var topOfWindow = $(window).scrollTop(), 

       bottomOfWindow = topOfWindow + $(window).height(); 

      var imagePos = $(this).offset().top; 

      if (imagePos <= bottomOfWindow - 100 && imagePos >= topOfWindow - 250) { 

       $("#page").css("background-color", "black"); 
      } else { 

       $("#page").css("background-color", "white"); 

      } 

     }); 

    }); 
</script> 

Answer 1

私はこれがよく見えると思います：あなたが本当にあなたの心がそれに設定している場合は、

body { 
    background: black; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(black, white); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(black, white); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(black, white); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(black, white); /* Standard syntax */ 
} 

しかし：

$(document).scroll(function() { 
    rgb = $(document).scrollTop(); // just divide this number by however slow you want the effect to take place. 
    $(document).css("background","rgb(" + rgb + ", " + rgb + ", " + rgb + ")"); 
});