画面上の画像の位置に基づいて画像を変更する

Question

画像コンテナが表示され、画面上の一定量をスクロールして別の画像に切り替える方法を見つけようとしてきました。要素を元に戻します。

このページで使用されている正確な機能：http://www.asicstiger.com/gb/en-gb/knit（ビデオの下の4番目のセクション）が見つかりました。私はあなたがいくつかのケースでは、私はstackoverflowでこれまで述べているすべての例では、jQueryのscrollTopメソッドを使用することができる知っているしかし、それは私の応答のページでは、ページトップから常に同じ高さに切り替えるわけではありません。

.top {height:100vh;width:100%; background:red} 
 
.scrollImageSwap {width:100%;} 
 
.scrollImageSwap img {width:100%;} 
 
.scrollImageSwap .image1 {display:block;} 
 
.scrollImageSwap .image2 {display:none;} 
 
.bottom {height:100vh;width:100%; background:red}

<div class="top"></div> 
 
<div class="scrollImageSwap"> 
 
    <img class="image1" src="https://openclipart.org/image/800px/svg_to_png/19972/ivak-TV-Test-Screen.png" alt="image 1" /> 
 

 
    <img class="image2" src="http://www.hertenkamp-enkhuizen.nl/test/wp-content/uploads/sites/7/2015/06/testbeeld.jpg" alt="image 2" /> 
 
</div> 
 
<div class="bottom"></div>

誰でも助けることができますか？

Answer 1

OPが機能していることがわかりましたが、フェードを使用しませんでした。私は答えを更新しました。

あなたはjQueryのfadeIn();とfadeOut();はこれを達成するために使用することができます。このfiddleに示すよう

$(document).scroll(function(){ 
     if($(this).scrollTop() >= $('.scrollImageSwap').offset().top - 5) { 

      $(".image1").stop().fadeOut(1000, function(){ 
      $(".image2").stop().fadeIn(1000); 
      }); 
     } 

     else { 
      $(".image2").stop().fadeOut(1000, function(){ 
      $(".image1").stop().fadeIn(1000); 
      }); 
     } 
    }); 

これは、正常に動作するはずです。