Проверьте, какой ребенок находится в окне просмотра?

Question

После того, как я проверил, какой дочерний элемент находится в области просмотра, я бы хотел, чтобы этот дочерний элемент получил некоторый класс ('child-animate'), а затем, когда следующий дочерний элемент появляется в области просмотра, который я хотел бы следующий для получения класса ('child-animate') и т. Д.

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<script>
$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = (elementTop + $(this).outerHeight()) * .9;
  var viewportTop = $(window).scrollTop();
  var viewportBottom = (viewportTop + $(window).height()) * .75;

  return elementBottom > viewportTop && elementTop < viewportBottom;
};
</script>

Я пробовал что-то вроде этого:

if ($('.parent .child').isInViewport()) {
    $(this).addClass('child-animation');
}

Answer 1

Лично я бы использовал IntersectionObserver. Я создал простую версию, которую вы можете увидеть здесь.

const children = document.querySelectorAll(".child");

observer = new IntersectionObserver( (entries, observer) => {
  entries.forEach (entry => {
    if (entry.intersectionRatio > 0) {
      // console.log(entry.target.innerHTML + " is visible");
      entry.target.classList.add("animate");
    } else {
      entry.target.classList.remove("animate");
    }
  });
});

children.forEach( child => {
  observer.observe(child);
});

.child {
  height: 120vh;
  background-color: #efefef;
  margin: 1em;
  opacity: 0;
}

.animate {
  animation: fade-in .5s ease-in-out forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

<div class="parent">
    <div class="child">Child1</div>
    <div class="child">Child2</div>
    <div class="child">Child3</div>
    <div class="child">Child4</div>
</div>