滚动触发动画

基本上我想在用户向下滚动添加一个类后触发这个框动画。滚动触发动画

似乎无法为我做这项工作，我可能做了一些根本性的错误。下面是我目前的代码，任何人都可以给我指点我做错了什么？谢谢！

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve"> 
    <rect class="box" x="147.297" y="237.162" fill="#FFFFFF" stroke="#000000" stroke-width="8" stroke-miterlimit="10" width="305.405" height="125.676"/> 
</svg>

CSS

 @keyframes offset{ 
    100%{ 
     stroke-dashoffset:0; 
    } 
    } 

.box{ 
    stroke:transparent; 
} 
    .box.draw{ 
    stroke:#202020; 
    stroke-width:5; 
    stroke-dasharray:910; 
    stroke-dashoffset:910; 
    animation: offset 5s linear forwards; 
    }

的jQuery/JS

$(function() { 
    var boxDraw = $(".box"); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     if (scroll >= 400) { 
      box.addClass("draw"); 
     } 
    }); 
});

另外，怎么可能才有可能在页面中的某个点之后触发动画，而不是滚动值？任何帮助，将不胜感激。

来源

2017-07-04 Joshua Chin

某一个点是一个滚动值。您可以检查要检查的元素的offsetTop，并将其与当前的scrollTop进行比较，如果要在某个特定元素即将触发时触发动画，但总是以滚动值结束。此外，你可以定义'var boxDraw = $（“。box”）;'但你将这个类应用到'box'，而不是'boxDraw' – Capsule

@Capsule已经算出来了。您正确的JS代码：

$(function() { 
    var boxDraw = $(".box"); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     if (scroll >= 400) { 
      boxDraw.addClass("draw"); 
     } 
    }); 
});

要触发滚动，当某一个元素是在视图中，再次@Capsule已经指出了这一点，但这里的代码

$(function() { 
    var boxDraw = $(".box"); 
    var boxDrawTop = boxDraw.offset().top; 
    var windowHeight = $(window).height(); 

    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     // let's fire up animation when .box is in view 

     if (scroll >= (boxDrawTop - windowHeight)) { 
      boxDraw.addClass("draw"); 
     } 
    }); 
});

来源

2017-07-04 05:36:32 Junaid

滚动触发动画

回答

相关问题