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

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

This is going to be a lot to chew for you I'm sure -- it was for me -- but there's a thing called the Intersection Observer api which allows you to register callbacks when an element is coming into view — TKoL, Nov 19 '20 at 14:11
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API — TKoL, Nov 19 '20 at 14:11
It's not exactly convenient from what I remember, but it does the job — TKoL, Nov 19 '20 at 14:11

Bjørn Nyborg · Accepted Answer · 2020-11-19T14:43:25.257

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

score 0 · Answer 2 · answered Nov 19 '20 at 15:29

0

I find something like this, using jQuery http://www.web2feel.com/freeby/scroll-effects/index5.html

answered Nov 19 '20 at 15:29

Daniel Witek

15
4

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

2 Answers2

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