자바스크립트 top 버튼 애니메이션 - requestAnimationFrame()

안녕하세요 찐망고입니다.

 

웹사이트에서 페이지가 길어질 때 나오는 top버튼 

top버튼을 누르면 자연스럽게 페이지위로 올라가는 애니메이션을 적용해 볼까 합니다.

 

제이쿼리에는 animate()라는 메서드가 내장되어 있지만

javascript에서는 존재하지 않으므로 스크롤 애니메이션을 구현하기 위해

requestAnimationFrame()을 사용하여 스크롤 위치를 변경할 겁니다.

 

호반문화재단

예시 사이트인데요 

푸터에서 top버튼을 누르면 자연스럽게 상단으로 넘어가죠?

 

 

스크립트 코드입니다.

const topBtn = document.querySelector('.topBtn');
  topBtn.addEventListener("click", function() {
    const scrollToTop = () => {
    // window.scrollY: 현재 스크롤 위치를 가져옵니다.
      const currentPosition = window.scrollY;
      // (currentPosition > 0) 현재 스크롤 위치가 0보다 크면 아래 코드를 실행
      // 페이지가 상단이 아닌 경우에만 스크롤을 조정
      if (currentPosition > 0) {
      // scrollTo(0, currentPosition - 50) 
      // 첫 번째 인수는 가로 스크롤 위치이고, 두 번째 인수는 세로 스크롤 위치
          window.scrollTo(0, currentPosition - 50);
            requestAnimationFrame(scrollToTop);
          }
        }

      scrollToTop();
  })

 

 

requestAnimationFrame() 함수는 

브라우저에게 다음 애니메이션 프레임을 실행하기 전에 애니메이션을 업데이트하라고 요청하는 메서드입니다.

이 함수는 주로 웹 애니메이션을 부드럽게 실행하는 데 사용되는데

애니메이션을 생성하려면 브라우저가 화면을 다시 그릴 준비가 되었을 때 

애니메이션 프레임을 업데이트해야 합니다. 

이때 requestAnimationFrame()을 사용하면 브라우저가 다음 프레임을 그리기 전에 

콜백 함수를 실행할 수 있습니다.

requestAnimationFrame() 메서드는 콜백 함수를 매개변수로 사용하며, 

이 콜백 함수는 다음 프레임을 그리기 전에 실행됩니다. 

따라서 애니메이션의 각 프레임에서 콜백 함수가 호출되어 새로운 프레임을 그릴 준비를 할 수 있습니다.

이를 통해 애니메이션을 브라우저가 처리하는 방식과 동기화하여 부드러운 애니메이션 효과를 얻을 수 있습니다. 

 

 

See the Pen requestAnimationFrame by 찐망고 (@nnwbliyz-the-styleful) on CodePen.