更改不同幻燈片上的圖像序列

-1

我修改了此視差網站模板，該模板分爲不同的部分和幻燈片。在每張幻燈片上，我都希望根據每張幻燈片上的滾動位置爲固定位置的圖像序列設置動畫。由於每個幀都與scrollTop（）值相關，因此很快就會有91個圖像的動畫結束。因此，我希望它爲scrollTop（）中的每個4或5個像素顯示一個幀。我該怎麼做呢？更改不同幻燈片上的圖像序列

HTML：

<body> 
    <main> 
    <!-- SECTIONS --> 
     <section id="slide-1" class="homeSlideTall"> 
      <div class="bcg" data-center="background-position: 50% 0px;" data-bottom-top="background-position: 50% 100px;" data-top-bottom="background-position: 50% -200px;" data-anchor-target="#slide-1"> 
       <div class="hsContent" data-start="opacity: 1; top: 206px;" data-100-bottom="opacity: 1;top: 206px; left: 0px; width: 100%;" data-top-bottom="opacity: 0; top: -550" data-anchor-target="#slide-1"> 
        <div class="boxScroll img" > 
         <img src="/img/model/0.png" width="960" height="540" /> 
        </div> 
        <div class="boxScroll" > 
         <h2>Carried Away</h2> 
         Product-text 
        </div> 

       </div> 
      </div> 
     </section> 

     <section id="slide-3" class="homeSlideTall"> 
      <div class="bcg" data-center="background-position: 50% 0px;" data-bottom-top="background-position: 50% 10px;" data-top-bottom="background-position: 50% -10px;" data-anchor-target="#slide-3"> 
       <div class="hsContent" data-bottom-top="opacity: 0; top: 1000px" data-top="opacity: 1; top: 206px; width: 100%;" data-100-bottom="opacity: 1; position: fixed; top: 206px; width: 100%;" data-top-bottom="opacity: 0; top: -550" data-anchor-target="#slide-3"> 
        <div class="boxScroll img" > 
         <img src="/img/model/0.png" width="960" height="540" /> 
        </div> 
        <div class="boxScroll" > 
         <h2>Way</h2> 
         Product-text 
        </div> 
       </div> 
      </div> 
     </section> 
    </main> 
</body>

JQuery的：

jQuery(window).on("scroll",function() { 
    var n = $(window).scrollTop(), 
    divOffset = $('#slide-1').offset().top, 
    dist = (n - divOffset); 
    if (dist <= 0) { var dist = 0; } // Check that value isn't smaller than 0 
    if (dist >= 91) { var dist = 91; } // In case there aren't any more frames show the last one in the sequence 
    jQuery("#slide-1 .boxScroll img").attr({src:"/img/model/"+dist+".png"}); 
});

來源

2016-01-14 koelare

歡迎來到Stack Overflow。我已經創建了一個jsFiddle進行測試：https：//jsfiddle.net/Twisty/z7m3zn87/請編輯您的文章，幷包括您嘗試過的以及遇到的錯誤。 – Twisty

在某些輸出中添加：https://jsfiddle.net/Twisty/z7m3zn87/1/我不確定你想要完成什麼，但是它在距離變化足夠的時候可以根據需要替換圖像源。 – Twisty

@Twisty嗨，謝謝你的回覆。如果我不清楚，我很抱歉。當我找到這個小提琴時，我設法解決它：http://jsfiddle.net/qJhRz/3/ 它的工作原理與我想要的完全一樣。然後下面的scrollTop（）「重置」爲零 newTop = $（this）.scrollTop（）; divOffset = $（'＃slide-3'）。offset（）。top; dist = newTop - divOffset; frame = Math.floor（dist/pixels）; – koelare

這正是我一直在尋找：

http://jsfiddle.net/qJhRz/3/

var newTop = 0, 

// animate every 10 pixels 
pixels = 10, 

// starting frame 
frame = 0; 

$(window).scroll(function(event) { 

//position of the window 
newTop = $(this).scrollTop(); 

// working out what frame to be on 
frame = Math.floor(newTop/pixels); 

//frame is the number frame you should animate to 
});

感謝。

來源

2016-01-15 10:04:25 koelare

更改不同幻燈片上的圖像序列

回答

相關問題