ビューポートでレイジーラインペインタのSVGアニメーションをトリガする方法

Question

現在、視差スクロールエフェクトを使用しているウェブサイトでレイジーラインペインタを使用して作成したSVGパスアニメーションがあります。現在のところ、3番目のページが表示されているので、アニメーションは表示されず、ユーザーがスクロールするまでには既にアニメーション化されています。私はjavascriptとjQueryの新機能で、ビューポートに入ったらアニメーションをトリガーする方法が不明です。

HTML：：

<section id="intro1" class="background"> 
    <div class="content-wrapper data-section"> 
      <div id="icons"></div> 
    </div> 
</section> 

JS：

var pathObj = { 
    "icons": { 
     "strokepath": [ 
      { 
       "path": "M654.4,95.7c-119.8-83.9-264-97.5-397-38.3C53.1,148.4-38.9,387.6,52,591.9", 
       "duration": 600 
      }, 
      { 
       "path": "M182.9,227.1l0.2-0.1C293.6,95.2,490,78.2,621.8,188.7c36.9,31,61.8,63.2,82.1,106.9", 
       "duration": 600 
      }, 
      { 
       "path": "M205.1,408.8c10.5-120,116.2-208.7,236.2-198.2c8,0.7,14.7,1.6,22.6,3.2", 
       "duration": 600 
      } 
     ], 
     "dimensions": { 
      "width": 728, 
      "height": 606 
     } 
    } 
}; 

$(document).ready(function(){ 
$('#icons').lazylinepainter( 
{ 
    "svgData": pathObj, 
    "strokeWidth": 10, 
    "strokeColor": "#4A90E2" 
}).lazylinepainter('paint'); 
}); 

編集コード：

function paintLine(){ 
    $('#icons').lazylinepainter({ 
    "svgData": pathObj, 
    "strokeWidth": 10, 
    "strokeColor": "#4A90E2" 
    }).lazylinepainter('paint'); 
} 

var element_position = $('#intro1').offset().top; 

$(window).on('scroll', function() { 
    var y_scroll_pos = window.pageYOffset; 
    var scroll_pos_test = element_position; 

    if(y_scroll_pos > scroll_pos_test) { 
     paintLine(); 
    } 
}); 

Answer 1

まず、あなたのlazylinepainterを作成する必要がありますこれは私が現在持っているコードです。ページロード時に実行される代わりに呼び出される関数。

次に、ビューポートが描画を開始するポイントに達したかどうかを確認するいくつかの数学を行うページスクロールのイベントリスナーを設定し、描画を開始する関数を呼び出す必要があります。起動するには

、あなたのライン塗装関数は次のようになります。

function paintLine(){ 
    $('#icons').lazylinepainter({ 
    "svgData": pathObj, 
    "strokeWidth": 10, 
    "strokeColor": "#4A90E2" 
    }).lazylinepainter('paint'); 
} 

イベントリスナーは、このようなものではJQueryで行うことができます

$(window).scroll(function(){ 
    // calculation 
    if(calculation){ 
    paintLine(); 
    } 
}); 

ます。また、スロットルすることもできますスクロールイベントが発生するたびに呼び出されないようにします。