Cacher is the code snippet organizer for pro developers

  // 要素出現 ------------ //
  const fadeTargets = document.querySelectorAll('.js-fade-in');
  const fadeOption = {
    rootMargin: '-20% 0px'
  };
  const targets = (entries, observer) => {
    entries.forEach(entry => {
      if(entry.isIntersecting){
        entry.target.classList.add('is-show');
        observer.unobserve(entry.target);
      }
    });
  };
  
  const fadeObserver = new IntersectionObserver(targets, fadeOption);
  
  fadeTargets.forEach((target) => {
    fadeObserver.observe(target);
  });

/* 下からフェードイン */
.js-fade-in {
  opacity : 0;
  transform: translateY(20px);
  transition: all 2.5s;
  transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
  
  &.is-show {
    opacity: 1;
    transform: translateY(0);
  }
}