添加一个类到<footer>元素可见时（在视口中）

Question

css on my website but I would like the animation to start only when the element appears on the page.

I have something like this:

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 spec: After installing Animate.css, add the class animate__animated to an element, along with any of the animation names. Name of animation: animate__fadeIn

JS

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

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

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

but "scroll" doesn't work, I try load but still doesn't work. please help me with this

Answer 1

As mentioned by TKoL you can look into the Intersection Observer API. But if you want an easier solution, i created this 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");
    }
});

The isInView function was found in this answer

Answer 2

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