'Java Script '로 웹페이지 이벤트 만들기

 

 

 

 

---

 

오늘은 자바스크립트로 클론 코딩을 했었던 '경일게임아카데미' 홈페이지에  이벤트를 적용해보겠습니다. 

 

먼저 

이벤트를 줄 엘리먼트들에게 아래의 코드를 활용해 애니메이션을 추가했습니다. 

 

.anim {

  transition: transform 1s linear, opacity 1s linear;

}

.off {

  transform: translateY(3rem);

  opacity: 0 !important;

}

anim 클래스에 트래지션 통해  변형의 대한 값과 투명도에 대한 속성을 지정해주었으며 

off 클래스에는 변형될 Y축 값과 투명도 값을 넣어 주었습니다.  

 

자바스크립트로 스크롤을 했을때 off 클래스 를 넣어주고 빼면서 페이지에 이벤트를 주려고합니다! 

 

 

 

 

 

const animElems = [...document.getElementsByClassName("anim")];  
// 1.anim 클래스는 htmlcollection 으로 유사배열이기에 배열로 묶어서 선언을해준다.


let aniTime = 0;    // 2.아래에 settimeOut 에 시간을 조절하기위해 먼저 0으로 초기화 한다.
function startAnim() {      //3. 함수로 아래의 설정을 묶어준다. 
  animElems.forEach((elem) => {       // 4.클래스로 가져온 여러 엘리먼트들을 반복을 통해 불러온다.
    if (elem.getBoundingClientRect().top < innerHeight) {    // 5. !!! 아래 참고
      if (elem.classList.contains("off")) //6. 조건문안에 조건으로 엘리먼트 클래스에 off 라는 클래스명이 있을경우를 언급한다.
        setTimeout(() => {             // 조건이 성립이 되면 클래스의 셋타임아웃이 실행
          elem.classList.remove("off");  클래스에서 off 를 제거 
        }, 1000 * aniTime++);         //aniTime++ 되면서 위의 값이 1씩 증가하며 페이지에 들어온 엘리먼트 들이 1초 씩 증가되면서 출력
    } else {  // 조건문이 성립하지 않으면 
      elem.classList.add("off");       // anim 클래스에 클래스명 off 를 추가 
    }
  });
}
startAnim();   // 함수를 미리 실행해야 새로고침하고 자동으로 화면내의 들어와있는 엘리먼트에 대한 이벤트들을 실행 

document.addEventListener("scroll", (e) => {   // 리스너를 통해 스크롤
  setTimeout(() => {   스크롤했을때 시간 설정에 대한 값을 0으로 초기화후 아래에서 위 함수를 실행 
    aniTime = 0;
  }, 250);
  startAnim();
});

 

 

5. !!!   getBoundingClientRect().top  메서드 를 통해 엘리먼트의 top 위치를 가져오며  innnerHeight 보다 작다의 경우는

지정엘리먼트가 페이지 안에 들어오는  순간을 말한다 . 

 

아래 사진을 보았을 때 엘리먼트의 탑의 길이가 페이지 보다 짧아질때를 말한다는 것을 쉽게 이해할 수 있다. 

 

 

 

Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를

제공하는 DOMRect 객체를 반환합니다.

https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect 참고