InersectionObserver element completly in viewport

Codiga Fan #25142

The code creates a scrollImations function that adds a CSS class to all the boxes in the document. It then creates an IntersectionObserver function that supplies it with the scrollImations function and the options object.

The scrollImations function adds a CSS class to the boxes if the box is entirely inside the observer's view. If the box overlaps some of the observer's view, the function will only add the class if the overlap ratio is 1.0.

// функция всего лишь добавляет CSS-класс, который и осуществляет анимацию
const scrollImations = (entries, observer) => {
  entries.forEach((entry) => {
  // анимируем, если элемент целиком попадает в отслеживаемую область
  if(entry.isIntersecting && entry.intersectionRatio == 1) {
    entry.target.classList.add('box--visible');
  } else {
    entry.target.classList.remove('box--visible');
  }
  });
}

// создаём обсервер с параметрами
const options = {
  threshold: 1.0,
};
const observer = new IntersectionObserver(scrollImations, options);

const boxes = document.querySelectorAll('.box');
boxes.forEach((box) => {
  observer.observe(box);
});