div＃がビューポートに来るときにアニメーションを開始するにはjavascriptが必要です

Question

1ページのウェブサイトでドローアニメーションを使用したいと思います。

var svg = new Walkway({ 
 
    selector: "#Capa_1", 
 
    duration: 6000 
 
}).draw(); 
 

 

 
var svg = new Walkway({ 
 
    selector: "#Capa_2", 
 
    duration: 6000 
 
}).draw();

 
\t path, line, polyline { 
 
\t  stroke: #fff; 
 
\t  stroke-width: 2px; 
 
    } 
 

 
    path { 
 
\t  fill: transparent; 
 
    }

<div class="main"> 
 
\t \t <div id="One" class="left"> 
 
\t \t \t <svg version="1.1" id="Capa_1"> </svg> 
 
\t \t </div> 
 
\t \t <div id="Two" class="right"> 
 
\t \t \t <svg version="1.1" id="Capa_2"></svg> 
 
\t \t </div> 
 
\t </div>

Answer 1

このような何かが

https://jsfiddle.net/patrik/89n0h7c3/

var height = window.innerHeight; 
var el = document.getElementById('animation'); 
var bounds = el.getBoundingClientRect(); 

function draw() { 
    if (window.scrollY + innerHeight >= bounds.top) { 
    el.classList.add('animate'); 
    } 
} 

window.addEventListener('scroll', function() { 
    draw(); 
}); 


// Try to draw immediately on refresh 
draw();