当div＃进入viewport

Question

我想在单页网站上使用绘制动画，我希望动画在我滚动到div＃not on document ready时开始。

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


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

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

    path {
	    fill: transparent;
    }

<div class="main">
		<div id="One" class="left">
			<svg version="1.1" id="Capa_1"> </svg>
		</div>
		<div id="Two" class="right">
			<svg version="1.1" id="Capa_2"></svg>
		</div>
	</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();