Question

我目前正在开发一个网站，我使用了一些svg技术！但是，我有一些在滚动动画的svg图标，但只要它们出现在屏幕上就会发生这种情况！问题是我需要这些图标出现在屏幕上而不是直接触发我需要它等待用户滚动我多一点，然后开始动画！这是我使用的js：

$(window).scroll(function() {
drawLines();
});


function drawLines(){
$.each($(".red-line"), function(i, val){
var line = val;
drawLine($(this), line);
});
}


function drawLine(container, line){
var length = 0;
var pathLength = line.getTotalLength();
var distanceFromTop = container.offset().top - $(window).scrollTop();
var percentDone = 1 - (distanceFromTop / $(window).height());
length = percentDone * pathLength - 500;
line.style.strokeDasharray = [length,pathLength].join(' ');
}

Answer 1

使用.scrollTop()测量滚动距离，并将drawLines（）设置为在指定距离后开始（在示例200中）：

$(window).scroll(function (event) {
    var sc = $(window).scrollTop();
    if (sc>200){drawLines();}
});

延迟svg onscroll动画在动画播放后立即出现在屏幕上

1 个答案: