[javascript] 자바스크립트 스크롤 애니메이션

참고: https://css-tricks.com/books/greatest-css-tricks/scroll-animation/

JavaScript를 사용하지 않고 CSS 만으로 스크롤 애니메이션을 할 수도 있습니다. 수평 스크롤바 포스트를 보면 확실히 CSS 매직입니다. 하지만 이번에는 JavaScript에 의해 만들어진 아주 작은 정보인 페이지가 얼마나 멀리 스크롤 되었는지를 가지고 CSS에서 다양한 스크롤 애니메이션 작업을 할 수 있습니다.

스크롤 애니메이션

다음의 자바스크립트 한 줄로 스크롤된 페이지의 비율을 알아낼 수 있고 CSS 커스텀 속성을 설정할 수 있습니다.

window.addEventListener('scroll', () => {
  document.body.style.setProperty('--scroll', window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);

이 코드가 실행되면 CSS에서 --scroll 속성을 사용할 수 있게 됩니다.

이 트릭은 CSS 트릭 마스터인 Scott Kellum 으로부터 왔습니다.

일단 위의 --scroll 속성을 사용하지 않고 애니메이션을 설정해 보겠습니다. 이는 영원히 회전하는 SVG를 보여주는 간단한 회전 애니메이션 입니다.

svg {
  display: inline-block;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

See the Pen scroll animation 1 by shinyks (@shinyks) on CodePen.

이제부터 진짜 트릭입니다. 일단 애니메이션을 일시 중지합니다. 특정 시간 동안 애니메이션을 돌리는 대신 페이지 스크롤에 따라 animation-delay를 조정하여 스크롤 위치에 따른 애니메이션을 만들겠습니다. animation-duration이 1초면 페이지 전체를 스크롤 했다는 의미입니다. 이 것이 하나의 애니메이션의 주기 입니다.

svg {
  position: fixed; /* make sure it stays put so we can see it! */

  animation: rotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
}

See the Pen scroll animation 2 by shinyks (@shinyks) on CodePen.

scott kellum은 원본 데모에 다음과 같은 설정을 추가했습니다.

animation-iteration-count: 1;
animation-fill-mode: both;

이는 약간 "overshoot" 이상함 때문에 설정했고 특히 짧은 뷰포트에서 보이므로 설정할 가치가 있습니다.

또한 scott kellum은 :root{} 자체에 스크롤 관련 애니메이션 속성을 설정했는데, 이는 페이지의 모든 애니메이션을 한 번에 제어할 수 있음을 의미합니다. 다음은 세 개의 애니메이션을 동시에 제어하는 scott의 데모 입니다.

See the Pen scroll animation 3 by shinyks (@shinyks) on CodePen.

관련 글

CSS Scroll Indicator (수평 스크롤바)

자바스크립트 스크롤 애니메이션 (애플 홈페이지)