Scroll-based CSS 애니메이션

안녕하세요! YB 김예원입니다.

1주차 과제를 하면서 js없이 css만으로 무한 스크롤을 구현 가능하다는 것이 정말 신기했는데요!

따라서 css 기반으로 스크롤 애니메이션을 구현하는 다양한 방법을 알아보았습니다.

 

Scroll-based 애니메이션이란?

스크롤 기반 애니메이션: 사용자의 스크롤 위치나 뷰포트 진입 시점을 기준으로 애니메이션을 제어하는 방식

 

 

예를 들자면,

 

• 웹사이트를 쭉 내리다가이미지나 텍스트가 부드럽게 나타나는 거
• 스크롤을 내리면 상단에 진행 표시줄(progress bar) 이 생기고 쭉 차오르는 거
• 박스가 스크롤 위치에 따라 옆으로 움직이거나 색이 바뀌는 거

---

 

그렇다면 구현 방법은?

방법 1.

IntersectionObserver로 fade-in 효과 주기

Intersection Observer API: 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법 (MDN)

즉, 특정 요소가 화면에 보일 때만 애니메이션 작동 시키는 것!! --> 불필요한 렌더링 ↓, 사용자 주목도 ↑

<div class="hidden">안녕하세요, 저는 스크롤 시 등장합니다!</div>

.hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}
 /* 화면에 안보이는 상태일 때  */
 
 
 
.show {
  opacity: 1;
  transform: translateY(0);
}
 /* 화면에 보이는 상태일 때  */

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
  // 화면에 들어오면 show 클래스 추가!
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    }
  });
});
// 숨겨져 있는 모든 요소를 관찰 대상에 추가
document.querySelectorAll('.hidden').forEach(el => observer.observe(el));

 

https://velog.io/@kymkjh2002/IntersectionObserver%EC%9D%98-%EC%82%AC%EC%9A%A9%EB%B2%95

IntersectionObserver의 사용법

 

방법 2.

scroll-timeline/ view-timeline 이용하기

스크롤 진행도에 따라 애니메이션 제어하기

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

//기존 애니메이션 사용법
.animation {
  animation: fadeIn 1s linear; // 1초 동안 애니메이션!
}

// scroll-timeline 방식
.animated {
  animation: fadeIn 1s linear;
  animation-timeline: scroll();
}

// view-timeline 방식
.element {
  animation: fadeIn 1s linear;
  animation-timeline: view();
}

scroll-timeline	전체 페이지 스크롤 위치에 따라 애니메이션 제어
view-timeline	특정 요소가 뷰포트에 얼마나 보이는지를 기준으로 애니메이션 제어

 

**다만 이 기능을 아직 지원하는 브라우저가 많이 없다...ㅠ

 

https://velog.io/@narcoker/animation-timeline-scroll

[CSS] animation-timeline : scroll

 

방법 3.

GreenSock Animation Platform(GSAP) 사용하기

• 자바스크립트 기반 애니메이션 라이브러리
• 부드럽고 정밀한 애니메이션 제작 가능
• 크로스브라우저 호환성, 퍼포먼스 최적화까지 잘 되어 있음.

그리고 여기에 ScrollTrigger라는 플러그인을 붙이면…

✨ 스크롤에 따라 움직이고, 등장하고, 사라지고, 확대되고, 반대로 재생되고… 다 된다!

gsap.to(".box", {
  x: 300,//box가 오른쪽으로 300px 이동하는 애니메이션
 scrollTrigger: {
  trigger: ".box",        // 어느 요소가 화면에 보일 때 트리거할지
  start: "top center",    // 트리거 요소의 'top'이 화면의 'center'에 닿으면 시작
  end: "bottom top",      // 트리거 요소의 'bottom'이 화면의 'top'에 닿으면 끝
  scrub: true             // 스크롤 위치에 따라 애니메이션이 따라다님
}
});

https://velog.io/@seoyaon/GSAP-GSAP-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

[GSAP] GSAP 시작하기