将 class 添加到 <footer> 元素可见时（在视口中）

Question

css 在我的网站上，但我希望仅当元素出现在页面上时才开始播放动画。

我有这样的东西：

HTML

<footer id="footer" class="animate__animated">
    <div class="footer-all">
        <img src="img/logo-hero@2x.png" alt="" class="logo-footer">
        <p class="copyright">CASA DI AMICI C 2020 All rights reserved</p>
    </div>
</footer>

CSS 规格：安装 Animate.css 后，将 class animate__animated 添加到元素，以及任何动画名称。动画名称：animate__fadeIn

JS

let footer = document.getElementById("footer");

window.addEventListener("scroll", function() {

    footer.classList.add('animate__fadeIn'); 
});

但是“滚动”不起作用，我尝试加载但仍然不起作用。请帮我解决这个问题

Answer 1

如 TKoL 所述，您可以查看 Intersection Observer API。但是如果你想要一个更简单的解决方案，我创建了这个 example on Codepen

function isInView(el) {
   let box = el.getBoundingClientRect();
   return box.top < window.innerHeight && box.bottom >= 0;
}

window.addEventListener("scroll", function() {
  var footer = document.getElementById("footer");
  var visible = isInView(footer);
    if(visible) {
      footer.classList.add("animate__fadeIn");
    } else {
      footer.classList.remove("animate__fadeIn");
    }
});

在此 answer

中找到 isInView 函数

Answer 2

我找到了类似的东西，使用 jQuery http://www.web2feel.com/freeby/scroll-effects/index5.html

将 class 添加到 <footer> 元素可见时（在视口中）

Adding a class to <footer> element when it is visible (in viewport)

javascript

css

animate.css