inflearn-BBC(animation effect)

HTML
data-~~ = "!!!"
!!!라는 함수를 실행시키시오 라는 의미라서 !!!함수를 정의해 두고 해당 class가 실행되면 함수가 실행된다.

<div class="graphic-item" data-action="birdFlies"> 

actions의 매소드로 등록

 const actions = {
        birdFlies(key) {
            if (key){
                document.querySelector('[data-index="2"] .bird').style.transform = `translateX(${window.innerWidth}px)`;
            } else {
                document.querySelector('[data-index="2"] .bird').style.transform = `translateX(-100%)`;
            }
        }
        };

<새로고침 시 처음으로 돌아가기>

window.addEventListener('load' , () => {
      setTimeout(() => scrollTo(0, 0), 100);
  });