qz.comに似たフィルムストリップアニメーション

-1

qz.comと同様のスクロールでフィルムストリップアニメーション効果を作成しようとしています。 https://qz.com/qz.comに似たフィルムストリップアニメーション

jqueryを使用してこれを達成する方法を知っていますか？ここで

2017-04-13 Joe

本文にスクロールリスナーをアタッチし、getBoundingClientRect（）の値を基準にスクロールの進行状況に基づいてvideos currentTimeプロパティを設定します。 – sboesch

スプライトイメージを使用する必要はありませんが、現在の時間で達成できますか？ – Joe

ちょうどそれを試して、クロムでうまく動作します。それが他のブラウザでどのように動くかは分かりません。パフォーマンスを気にする人は、qzのソリューションがおそらく最高ですが、サーバがビデオをそのようなストライプにレンダリングできない場合は、あまりにも多くの労力がかかります。 – sboesch

は一例です：

<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％の進捗状況を計算し、currentTimeの計算に使用します。

出典

2017-04-13 08:54:24 sboesch

qz.comに似たフィルムストリップアニメーション

答えて

関連する問題