スクロールでのSVG開始の設定

Question

私は最後のセクションにあるアニメーションタイムラインsvgを持っています。

http://chalke-design-ebbca1.webflow.io/our-process

は、アニメーションはすぐにページがロードされると起動しますが、私は、ページの特定の部分にのみときに、ユーザーがスクロールし、それをトリガーにしたいです。

誰でも手伝ってください！

ありがとうございます！

Answer 1

Check if element is visible on screenまたはCheck if element is visible after scrollingのようなものが必要な場合があります。つまり、要素のトップオフセットが画面の境界内にあるかどうかを確認し、その条件が満たされている場合はアニメーションを開始します。

var theElementInQuestion = document.getElementById("theElementInQuestion"); 

if (isScrolledIntoView(theElementInQuestion)) { 
    startAnimation(); 
} 

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}