设置SVG从滚动开始

我有一个动画时间轴svg来自最后一节。

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

动画在页面加载后立即开始,但只有在用户滚动到页面的特定部分时才会触发动画。

谁能帮忙!

先谢谢你!


也许你需要这些问题中概述的内容:检查元素是否在屏幕上可见,或者在滚动后检查元素是否可见,即检查问题元素的顶部偏移量是否在屏幕边界内,然后启动你的动画如果条件成立的话。

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));
}
链接地址: http://www.djcxy.com/p/83613.html

上一篇: Setting SVG start on scroll

下一篇: how can I start playing my video in html5 when user scrolls to it?