[Javascript] 스크롤에 따라 박스 크기, 글자 크기, 위치 조정하기

위와 같이 스크롤하면 중간에 박스의 크기가 커지고 글자의 크기와 위치가 변형되게 만들어보았다.

 

HTML

  <div class="section">

    <div class="wrap">

      <div class="bg"></div>

      <p class="title">제 위치로 찾아갑니다~</p>

    </div>

  </div>

 

 

CSS

body, html{

  contain: paint;

}

.section{

  width: 100%;

  height: 300vh;

}

.wrap{

  position: sticky;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

}

.bg{

  width: 100%;

  height: 100%;

  background-color: aqua;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(0.3);

}

.title{

  width: 100%;

  text-align: center;

  position: absolute;

  font-size: 100px;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

큰 section 안에  wrap으로 position: sticky를 써서 화면 꽉 차게 담은 후 bg와 title을 position: absolute로 띄운 후 위치를 조정해주었다. 그리고 bg는 width와 height로 크기를 조정하는 것이 아닌 scale로 조정해주었다.

 

JAVASCRIPT

window.addEventListener('scroll', function () {

  let bgScale = 7 / 15000 * window.scrollY + 0.3;

  let titleScale = -1/25 * window.scrollY + 100;

  let titleTop = -7/250 * window.scrollY + 50;

  let titleLeft = -19/750 * window.scrollY + 50;

  document.querySelector('.bg').style.transform = `translate(-50%, -50%) scale(${bgScale})`;

  if(titleScale >= 30){

    document.querySelector('.title').style.fontSize = `${titleScale}px`

  }

  if(titleTop >= 8){

    document.querySelector('.title').style.top = `${titleTop}%`

  }

  if(titleLeft >= 12){

    document.querySelector('.title').style.left = `${titleLeft}%`

  }

})

window에 스크롤 이벤트 리스너를 써서 변수에 bg의 scale을 조절하는 함수, title의 폰트사이즈를 조절하는 함수, title의 top, left값을 조절하는 함수를 각각 담은 변수들을 저장해주고 조건이 필요하면 조건문에 담아서 style element들을 수정하는 방식을 사용했다. bg의 transform을 조절하는 코드를 보면 translate값을 고정으로 가만히 두었는데 css에 translate값이 담겨있기 때문에 자바스크립트에서 저 translate코드를 써주지 않으면 스크롤할 때 translate값이 사라지게 되기 때문에 꼭 써주어야 한다.