클론코딩 7 - scroll 이벤트 활용

경일게임아카데미 intro페이지 스크롤을 내릴때 시간차를 두고 효과가 나타나게끔 하기

 

https://www.kiweb.or.kr/intro

경일게임 아카데미

 

 

 

<div class="text">
            <h1 class="anim off">개발자 취업,</h1>
            <h1 class="anim off">그 이상의 가치를 만들다!</h1>
            <p class="anim off">
              능력으로 인정 받는 슈퍼신입으로 만들어드립니다.<br />왕초보여도
              상관없어요.<br />제대로 하겠다는 마음만 가지고 오세요!
            </p>
          </div>

.anim {
  transition: transform 1s linear, opacity 1s linear;
}
.off {
  transform: translateY(3rem);
  opacity: 0 !important;
}

▲ html과 css 에 효과를 주고싶은것에 class로 "anim" 와 "off" 를  지어주고 각각의 효과를 입력해준다.

     → 3rem만큼 아래로 내려가 있고 보이지않는 상태에서 이벤트를 주어 1초 동안 나타나는 효과

 

setInterval(() => {
  [...document.getElementsByClassName("anim")].forEach((elem) => {
    elem.classList.toggle("off");
  });
}, 2000);

▲ h1와 p에 위에 주었던 효과를 2초동안 반복해서 실행할때 → 확인해보기위해 작성함

 

 

const animElems = [...document.getElementsByClassName("anim")];

let aniTime = 0;
function startAnim() {
  animElems.forEach((elem) => {
    if (elem.getBoundingClientRect().top < innerHeight) {
      if (elem.classList.contains("off"))
        setTimeout(() => {
          elem.classList.remove("off");
        }, 1000 * aniTime++);
    } else {
      elem.classList.add("off");
    }
  });
}

startAnim();

document.addEventListener("scroll", (e) => {
  setTimeout(() => {
    aniTime = 0;
  }, 250);
  startAnim();
});

▲ scroll 이벤트를 활용해서 스크롤을 내릴때 마다 "anim" 과 "off" 의 class를 가진 콘텐츠에  효과가 나타난다.

    → "anim" 과 "off" 의 class를 가진 콘텐츠에 높이를 찾고, "off"의 효과가 add되었다가 remove되게끔

 

 

---

★★★ 기억하고 남겨둘것!!!

 

※ 구조분해할당과 스프레드 연산자

const [temp, temp2, ...temp3] = [1, 2, 3, 45, 56];
console.log(temp);
console.log(temp2);
console.log(temp3);

const { aa } = { aa: 4213 };
console.log(aa);

※ [...document.getElementsByClassName("anim")]

    → 유사배열이기 때문에 스프레드 연산자로 풀어서 [] 배열에 넣어서 사용

※ offsetHeight / offsetTop

※ getBoundingClientRect()

※ classList.contains