아주 간단하게 스크롤 페이지 이동 효과 만들기

html 코드

<div id="main">
	<p>hello world</p>
</div>

<div id="sub">
	<p>new page</p>
</div>

css 

#main {
    width: 100vw;
    height: 100vh;
    overflow: auto;
	...
}

#sub {
    width: 100vw;
    height: 10px;
}

main에서 스크롤하면 sub가 나오도록 하고 싶다면

이렇게 페이지를 구성한 뒤

window.addEventListener("wheel", (e) => {
  if (window.scrollY > 0) {
    document.querySelector("#sub").style.height = "100vh";
  } 
  if(window.scrollY === 0) {
    document.querySelector("#sub").style.height = "10px";
  }
});

javascript로 wheel 을 내렸을 때 sub의 height를 100vh로 만들어주고 다시 main으로 올라가면 10px로 바꿔주는 코드를 넣는다.

이렇게 하면 처음에는 main div에 작성된 화면이 뷰포트 가득(100vw, 100vh이므로) 구성되어 있다가

스크롤을 내리면 sub div로 작성한 페이지가 보이게 된다.

 

여기서 주의할 점은 div 두개가 연달아 있을 때 스크롤 이벤트가 발생하면 div 사이에 간격이 생긴다.

그리고 그것을 없애는 방법은 

 

#main {
    display: block;
    margin: 0;
    font-size: 0px;
    width: 100vw;
    height: 100vh;
    overflow: auto;
	...
}

#sub {
    display: block;
    margin: 0;
    font-size: 0px;
    width: 100vw;
    height: 10px;
}

 

이렇게 div css에 display는 block으로 font-size를 0px 로 해주면 div 사이의 간격이 사라진다.

 

+ 스크롤이 내려갈 때 원래 보였던 main div는 fade out되고, sub div은 fade in 되는 효과를 주고 싶으면

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

#main {
    display: block;
    margin: 0;
    font-size: 0px;
    width: 100vw;
    height: 100vh;
    overflow: auto;
	...
}

#sub {
    display: block;
    margin: 0;
    font-size: 0px;
    width: 100vw;
    height: 10px;
}

css에 fade in, fade out 효과를 추가해주고

 

window.addEventListener("wheel", (e) => {
  if (window.scrollY > 0) {
    document.querySelector("#sub").style.height = "100vh";
    document.querySelector("#sub").style.animation = "fadein 5s";
    document.querySelector("#main").style.animation = "fadeout 3s";
  } 
  if(window.scrollY === 0) {
    document.querySelector("#sub").style.height = "10px";
  }
});

javascript 코드에 스크롤이 내려갈 때 sub은 fade in, main은 fade out 되도록 써주면 된다.