在滚动时设置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));
}