스크롤로 시작되는 애니메이션

스크롤할 때 애니메이션 실행하기

CSS 측면

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

대상 선택하기

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

관찰자 만들기

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

클래스 추가하기

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

한 번만 애니메이션 실행하기

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

양방향으로 다시 애니메이션 실행하기

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

관찰 시작하기

items.forEach(el => observer.observe(el));

애니메이션 순차 실행하기

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

동작 감소 설정 존중하기

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

성능 향상

빠른 확인

복습