[JS] 스크롤 페이드인 기능 구현

요소를 처음에는 숨겼다가 요소가 화면에서 떨어진 높이만큼 스크롤했을때

페이드인되며 나타나게 하는 기능 구현에 대한 정리입니다.

 

CSS

/* 스크롤 등장박스 */
.showBox {
    opacity: 0;
    transform: translateY(10%);
    transition: all .5s ease-in-out;
}

/* 스크롤 등장 클래스 */
.showBox.on {
    opacity: 1;
    transform: translateY(0);
}

 

자바스크립트

// 등장액션 대상: .showBx
const showBox = document.querySelectorAll(".showBox");
// 화면높이값 2/3 구하기
const screenH = window.innerHeight / 3 * 2;

// 등장액션 대상 위치값 리턴함수
const retVal = ele => ele.getBoundingClientRect().top;

// 클래스 넣기 함수
const showTit = x => {
  let xval = retVal(x);
  if (xval < screenH && xval > 0) {
    // 요소가 화면에 나타날 때 opacity를 1로 변경
    x.classList.add("on");
  }
};

window.addEventListener("scroll", () => {
  // 스크롤 등장요소 개수만큼 for문 돌리기
  for (let x of showBox) showTit(x);
});

등장액션을 적용할 대상요소 전체를 잡고,

for문으로 각각의 요소를 인자에 담아 showTit 함수를 호출합니다.

이때 showTit은 파라미터로 들어온 요소에 등장액션클래스를 추가하는 기능을 수행합니다.

showBox 개별 요소들에 .on 클래스가 추가되면 opacity = 1 이 되며 숨겼던 요소가 나타나게 됩니다.

이때 요소가 갑자기 확 나타나면 부자연스럽기 때문에 대상요소의 초기값에 트랜지션 속성과, transform 속성을 주면

요소가 천천히 등장하며 나타날때 살짝 위로 올라오는 효과를 줄 수 있습니다.

 

요소들 각각의 getBoundingClientRect().top 을 일일히 구해주면 번거로우므로

대상요소의 위치리턴함수를 별도로 만들어서 파라미터로 들어온 요소의 상단으로부터 떨어진 위치값을 구해줍니다.

showTit 함수에 x라는 showBox 각각의 요소들을 파라미터값으로 전달했으니

showTit 함수 스코프 안에서 이 파라미터를 재사용할 수 있습니다.

그렇게 개별 요소들의 위치값까지 구해줬으면, 이제 on 클래스를 넣을 조건만 정해주면 끝입니다.

 

  if (xval < screenH && xval > 0) {

    // 요소가 화면에 나타날 때 opacity를 1로 변경

    x.classList.add("on");

  }

 

xval(개별 요소의 위치리턴값) 이 0 보다 크고, 윈도우 높이값보다 작을 경우에 실행이 되도록 해줬습니다.

만약 윈도우 높이값보다 클 경우라면 스크롤로 해당 대상 지점에 도달하기 전에 이미 화면에 표시될 것입니다.

그리고 스크롤바를 아래로 내리면 문서가 스크롤되며 위로 올라갈 것이고, 어느 시점에 요소가 화면 위쪽을 벗어날 것입니다.

요소가 화면 위쪽을 벗어난 경우 음수값이 되는데 음수값이 되기 전에 즉, 양수값일 경우에 요소가 등장하길 원하기 때문에

0 보다 클 경우의 조건도 모두 만족할때 명령을 실행하도록 이중조건을 걸어줬습니다.

 

최종 결과