滚动时触发动画

Question

基本上我想通过添加 class.

在用户向下滚动后触发此框动画

这似乎对我不起作用，我可能做错了根本性的事情。下面是我当前的代码，任何人都可以指点我做错了什么吗？谢谢！

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");
        } 
    });
});

此外，如何才能在页面中的特定点之后触发动画，而不是滚动值？任何帮助将不胜感激。

Answer 1

@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");
        } 
    });
});

Answer 2

搜索 js 库 wow.js（在此处搜索 engine-text 以获取最少的内容...）

滚动时触发动画

Trigger Animation on Scroll

html

javascript

css

jquery

squarespace