[Javascript] 스크롤에 따라 서서히 div 크기 달라지게 하기

Scroll Event(스크롤 이벤트)를 이용한 div 크기 변경

 

* position: sticky

* 일차함수

* Scroll Event

 

Preview

Scroll의 위치가 600 ~ 1400 까지는 width: 50vw ~ 100vw로, height: 50vh ~ 100vh 로 서서히 커지게 하고, 4000 ~ 4600에서는 width: 100vw ~ 0로, height: 100vh ~ 0으로 서서히 없어지게 한다.

 

 

HTML

  <div class="bg">

    <div class="bx">

      <p>나 커질거임</p>

    </div>

  </div>

 

HTML은 이렇게 간단하게 설정해줍니다.

 

CSS

.bg{

  width: 100%;

  height: 5000px;

  margin-top: 600px;

  margin-bottom: 600px;

}

.bx{

  width: 50vw;

  height: 50vh;

  background: #bbb;

  border-radius: 16px;

  position: sticky;

  top: 0px;

  margin: auto;

}

 

bg라는 클래스를 가진 div는 스크롤하는 것이 보이도록 height를 크게 잡는다.

bx라는 클래스를 가진 div는 초기 width, height값을 정해주고 position: sticky를 이용해서 고정시켜준다.

 

JS

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

  let currentScroll = document.querySelector('html').scrollTop; //현재스크롤값

  let bigger = (1 / 18) * currentScroll - (500 / 18); //초기에 bx크기가 커지는 함수

  let smaller = -(1 / 6) * currentScroll + (4000 / 6 + 100); //후반에 bx크기가 작아지는 함수

  if (smaller < 100) {

    document.querySelector('.bx').style.width = `${smaller}vw`

    document.querySelector('.bx').style.height = `${smaller}vh`

    document.querySelector('.bx').style.borderRadius = `16px`

  } else if (bigger > 100) {

    document.querySelector('.bx').style.width = `100vw`

    document.querySelector('.bx').style.height = `100vh`

    document.querySelector('.bx').style.borderRadius = `0`

  } else if (bigger >= 50) {

    document.querySelector('.bx').style.width = `${bigger}vw`

    document.querySelector('.bx').style.height = `${bigger}vh`

    document.querySelector('.bx').style.borderRadius = `16px`

  }

});

 

window의 scroll을 감지하는 이벤트리스너를 사용한다.

bigger와 smaller 변수에 담겨진 일차 함수는 특정 스크롤에서 특정 값으로 구했기 때문에 if문 안에 조건문에서 100과 50의 숫자가 나오는 것이다. (0% ~ 100%의 의미와 같다)

 

- 주의사항

처음에 bigger >= 50 조건부터 작성해서 반대로 적었는데 다른 조건이 부합할 때 적용되지 않아서 조금 헤맸다.

if문을 작성할 때 조건문이 true이면 그 밑에 else if는 아예 읽어버리지 않는다는 점을 주의해야한다.

위의 사항을 알아차리고 제일 마지막에 작동해야하는 조건을 가장 위로, 제일 처음에 작동해야하는 조건을 가장 아래로 작성했더니 잘 작동하였다.