InersectionObserver element completly in viewport

    0

    0

    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);
    });
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.