與qz.com類似的幻燈影片動畫

Question

我正在嘗試在類似qz.com的視頻上進行類似滾動的幻燈片動畫效果創建。 https://qz.com/

你知道如何用jQuery實現這個嗎？

Answer 1

下面是一個例子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
    var $video = $('video'); 
    var $window = $(window); 
    var totalTime = 6; // total time you want to play 

    $(window).bind('scroll', function() { 

     if($video[0].getBoundingClientRect().top < $window.height() && $video[0].getBoundingClientRect().bottom > 0) { 

      var progress = 100 - 100/($window.height() + $video.height()) * ($video[0].getBoundingClientRect().top + $video.height()); 
      $video[0].currentTime = Math.round(totalTime/100 * progress); 
      $video[0].paused = true; 

     } 

    }); 
</script> 

調整TOTALTIME控制多少秒將是可見的。 基本上，滾動函數會檢查視頻是否在視口中可見，如果是，則計算0到100％之間的進度，然後用它來計算當前時間。