기본 콘텐츠로 건너뛰기

웹 페이지 스크롤 내릴 때 콘텐츠 나타나기 - html, css, javascript

이미지
작성자:

웹페이지에서 스크롤을 내릴 때 콘텐츠가 나타나는 효과, 스크롤 올릴 때 사라지는 효과

html

<div class="service s1">
  <div class="cont">...</div>
</div>
<div class="service s2">
  <div class="cont">...</div>
</div>
<div class="service s3">
  <div class="cont">...</div>
</div>
<div class="service s4">
  <div class="cont">...</div>
</div>

css

.service .cont{
  opacity:0; /* 기본값 : 투명도 0 */
  transform:translateY(200px); /* 기본값 : 아래로 200px에 위치 */
  transition:transform 0.8s ease, opacity 0.8s ease; /* 애니메이션 할 속성, 속도, 효과 */
}
.service.on .cont{
  opacity:1; /* 투명도 1 */
  transform:translateY(0); /* 원래 위치로 */
}

javascript

// 스크롤 할 때 특정 콘텐츠의 브라우저 상단 기준 높이 값 구하기
scrollPos = (ofstop, no=0.7) => {
  return document.querySelector(ofstop).offsetTop - (Math.floor(window.innerHeight * no));
}

// 스크롤 기준 값
let pastScrollY = window.scrollY;

document.addEventListener("scroll", (e) => {
  // scroll down
  if( pastScrollY < window.scrollY ) {
    // 스크롤 위치가 s1 콘텐츠의 위치(0.7)보다 크거나 같고, s2 콘텐츠의 위치(0.7)보다 작으면.
    // 해당 콘텐츠(s1)의 영역이 30% 이상 보여지면.
    if ( window.scrollY >= scrollPos(".service.s1") && window.scrollY < scrollPos(".service.s2")) {
      // s1 콘텐츠 나타나기
      document.querySelector(".service.s1").classList.add("on");
    }
    
    // 스크롤 위치가 s2 콘텐츠의 위치(0.7)보다 크거나 같고, s3 콘텐츠의 위치(0.7)보다 작으면.
    // 해당 콘텐츠(s2)의 영역이 30% 이상 보여지면.
    else if ( window.scrollY >= scrollPos(".service.s2") && window.scrollY < scrollPos(".service.s3")) {
      // s2 콘텐츠 나타나기
      document.querySelector(".service.s2").classList.add("on");
    }
    
    // 스크롤 위치가 s3 콘텐츠의 위치(0.7)보다 크거나 같고, s4 콘텐츠의 위치(0.7)보다 작으면.
    // 해당 콘텐츠(s3)의 영역이 30% 이상 보여지면.
    else if ( window.scrollY >= scrollPos(".service.s3") && window.scrollY < scrollPos(".service.s4")) {
      // s3 콘텐츠 나타나기
      document.querySelector(".service.s3").classList.add("on");
    }
    
    // 스크롤 위치가 s4 콘텐츠의 위치(0.7)보다 크거나 같으면.
    // 해당 콘텐츠(s4)의 영역이 30% 이상 보여지면.
    else if ( window.scrollY >= scrollPos(".service.s4")) {
      // s4 콘텐츠 나타나기
      document.querySelector(".service.s4").classList.add("on");
    }
    
  }
  
  // scroll up
  else {
    // 스크롤 위치가 s1 콘텐츠의 가운데 아래(0.65)보다 작으면
    if ( window.scrollY < scrollPos(".service.s1", 0.65)) {
      // s1 콘텐츠 사라지기
      document.querySelector(".service.s1").classList.remove("on");
    }
    
    // 스크롤 위치가 s1 콘텐츠의 가운데 아래(0.65) 위치보다 크거나 같고, s2 콘텐츠의 가운데 아래(0.65) 위치보다 작으면
    else if ( window.scrollY >= scrollPos(".service.s1", 0.65) && window.scrollY < scrollPos(".service.s2", 0.65)) {
      // s2 콘텐츠 사라지기
      document.querySelector(".service.s2").classList.remove("on");
    }
    
    // 스크롤 위치가 s2 콘텐츠의 가운데 아래(0.65) 위치보다 크거나 같고, s3 콘텐츠의 가운데 아래(0.65) 위치보다 작으면
    else if ( window.scrollY >= scrollPos(".service.s2", 0.65) && window.scrollY < scrollPos(".service.s3", 0.65)) {
      // s3 콘텐츠 사라지기
      document.querySelector(".service.s3").classList.remove("on");
    }
    
    // 스크롤 위치가 s3 콘텐츠의 가운데 아래(0.65) 위치보다 크거나 같고, s4 콘텐츠의 가운데 아래(0.65) 위치보다 작으면
    else if ( window.scrollY >= scrollPos(".service.s3", 0.65) && window.scrollY < scrollPos(".service.s4", 0.65)) {
      // s4 콘텐츠 사라지기
      document.querySelector(".service.s4").classList.remove("on");
    }
    
  }
});

웹 페이지를 볼 때 스크롤을 내리면 컨텐츠가 아래에서 위로 나타나는 효과를 따로 플러그인을 사용하지 않아도 javascript와 css로 간단히 적용할 수 있다.

스크롤을 올려서 콘텐츠가 화면 밑으로 사라지면 나타났던 콘텐츠도 안보이게 했다가 다시 내릴 때 나타나는 효과를 줄 수도 있다.


끝.



분류 :