滚动 JS 上的动画

Question

我是 JavaScript 的新手，正在尝试在网站滚动时添加一些动画。

我有多个 div，每个都有一个唯一的 class 名称，并且都具有相同的 .section class。

我想在不触发另一个 .sections

的情况下为每个 .section 设置动画

<section class="home__one section></section>
<section class="home__two section></section>
<section class="home__three section></section>
<section class="home__four section></section>

$(window).on("scroll",function(){
    var winTop = $(this).scrollTop();
    var section = $(".section").offset().top;

    if(winTop >= section-400) {
      $(".section").addClass("animate");
    };
});

上面的代码显然会在第一个到达滚动位置时触发每个 .section。

我无法理解如何触发一个 .section 当它出现时。

我可能以完全错误的方式做这件事，所以如果我是，你的帮助将不胜感激。

Answer 1

在这里，您需要遍历所有可用的部分，无论哪个部分匹配，您都必须应用 class。

if (winTop >= section - 400) {
  $(".section").addClass("animate");
};

此外，您在 if 语句末尾没有 ;。

您的最终代码如下：

$(window).on("scroll", function(){
  var winTop = $(this).scrollTop();

  $(".section").each(function () {
    var section = $(this).offset().top;
    if(winTop >= section-400) {
      $(this).addClass("animate");
    }
  });
});

我建议从所有其他部分中删除 class animate。因此，以这种方式更改您的代码：

$(window).on("scroll", function(){
  var winTop = $(this).scrollTop();

  $(".section").removeClass("animate").each(function () {
    var section = $(this).offset().top;
    if(winTop >= section-400) {
      $(this).addClass("animate");
    }
  });
});

此外，一旦您开始添加 class，您不希望其他人在其中包含 class。所以，也给个最高值吧。

$(window).on("scroll", function(){
  var winTop = $(this).scrollTop();

  $(".section").removeClass("animate").each(function () {
    var section = $(this).offset().top;
    if(winTop >= section-400) {
      $(".section").removeClass("animate");
      $(this).addClass("animate");
    }
  });
});

工作代码段：

$(window).on("scroll", function(){
  var winTop = $(this).scrollTop();

  $(".section").removeClass("animate").each(function () {
    var section = $(this).offset().top;
    if(winTop >= section-400) {
      $(".section").removeClass("animate");
      $(this).addClass("animate");
    }
  });
});

.section {
  height: 750px;
}
.animate {
  background: #960;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home__one section">Section one</section>
<section class="home__two section">Section two</section>
<section class="home__three section">Section three</section>
<section class="home__four section">Section four</section>

预览：

您可以通过缓慢滚动看到的演示：JSBin Demo。

滚动 JS 上的动画

Animate on Scroll JS

javascript

animation

onscroll