히어로 등장 애니메이션

히어로 소개 페이지에 사용할 이미지에 배경과 히어로 이미지를 겹치게 두어 히어로가 등장하는 효과를 주고 싶었다. 

css로 애니메이션 적용 시 페이지가 로드되었을 때 애니메이션이 실행되므로 js로 현재 스크롤 위치와 이미지 컨테이너의 scrollY값을 받아 스크롤이 근처에 왔을 때 애니메이션이 실행되도록 하였다.

 

🧑‍💻 구현

const heroContainers = document.querySelectorAll(".hero-info-container");
const heroImages = document.querySelectorAll(".hero-image");

const hasAnimationPlayed = new Array(heroContainers.length);
hasAnimationPlayed.fill(false);

window.onscroll = () => {
  for (let i = 0; i < heroContainers.length; i++) {
    if (heroContainers[i].offsetTop - window.scrollY < 128) {
      hasAnimationPlayed[i] = true;
    }
  }

  for (let i = 0; i < heroContainers.length; i++) {
    if (hasAnimationPlayed[i]) {
      heroImages[i].classList.remove("hidden");
    }
  }
};

 

컨테이너의 offsetTop과 현재 window의 scrollY값의 차이가 특정 값보다 작아졌을 때 hidden 클래스를 없애 애니메이션이 실행되도록 했다.

🚀 TRY

첫 번째 이미지를 제외하고는 알맞은 위치에서 애니메이션이 실행되었다.

 

첫 번째 이미지는 페이지 로딩 시 애니메이션이 실행되게 하는 것이 나을까?

 

애니메이션이 한 번 실행된 후 스크롤이 위로 올라갔을 떄 이미지가 다시 hidden처리되는 스크립트를 getBondingClientRect 함수를 이용해 제작할 수 있을 것 같다. offsetTop도 이걸로 대체할 수 있을 것 같다.