구현하게 될 결과물은 아래와 같음

이번 글에서는 이를 어떻게 구현했는지 설명하고자 함

https://codepen.io/chriscoyier/pen/mdVWgdN

코드 뜯어보기

JavaScript

아래 자바스크립트 코드는 스크롤 이벤트가 발생되면 --scorll이라는 CSS 변수를 스크롤 량으로 설정하는 코드이다

• 이 CSS 변수는 CSS에서 var(--scroll)와 같이 접근할 수 있다.

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

CSS

아래 코드는 위에서 설정한 css 변수를 사용하여 svg 애니메이션을 제어하는 코드이다

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

여기서 눈에 띄는 부분은 아래 두 속성이다

• animation-play-state: paused;
• animation-delay: calc(var(--scroll) * -1s);