[Javascript] 스크롤하면 메인 visual 크기 변경

 

스크롤하면 메인 title이 서서히 사라지고 메인 visual의 크기가 커지면서 전체 화면을 차지하는 애니메이션을 만들어보았다. 잘 쓰면 꽤나 멋진 홈페이지를 만들 수 있지 않을까 싶다.

 

HTML

  <div class="title-box">

    <p class="title">무슨 일이 일어날까요??</p>

  </div>

  <div class="section">

    <div class="photo-wrap">

      <div class="photo1">

        <div class="photo black"></div>

      </div>

      <div class="photo2">

        <div class="photo purple"></div>

        <div class="photo purple"></div>

      </div>

      <div class="photo3">

        <div class="photo-main blue">

          <p>짜잔~</p>

        </div>

      </div>

      <div class="photo4">

        <div class="photo purple"></div>

        <div class="photo purple"></div>

      </div>

      <div class="photo5">

        <div class="photo black"></div>

      </div>

    </div>

  </div>

HTML은 간단하게 타이틀과 사진만 배치했다.

 

CSS

.title-box {

  position: fixed;

  top: 300px;

  left: 30%;

  z-index: 10;

}

.title {

  font-size: 60px;

}

.section {

  margin-top: 600px;

  width: 100%;

  height: 200vh;

  margin-bottom: 600px;

}

.photo-wrap {

  display: flex;

  justify-content: center;

  gap: 60px;

  position: sticky;

  top: 0;

  left: 0;

  contain: paint;

}

.photo2,

.photo4 {

  height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

}

.photo1,

.photo3,

.photo5 {

  height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

.photo {

  width: 400px;

  height: 46vh;

  border-radius: 16px;

}

.photo-main{

  width: 500px;

  height: 100vh;

  transition: all 0.3s;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 60px;

  border-radius: 16px;

}

.photo-main p{

  opacity: 0;

  transition: all 0.6s;

}

.black {

  background: black;

}

.purple {

  background: purple;

}

.blue {

  background: blue;

}

 

타이틀은 position:fixed를 해서 스크롤해도 불투명도로 조절하기 위해 고정시켜놨고, photo-wrap부분에는 스크롤 시에 고정되게 position:sticky를 걸고 photo를 배치해주었다.

 

JAVASCRIPT

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

  let titleOpacity = -1/600 * window.scrollY + 1;

  let photoMainWidth = 1/12 * window.scrollY - 25

  document.querySelector('.title').style.opacity = titleOpacity;

  if(window.scrollY >= 600){

    document.querySelector('.photo-main').style.width = `${photoMainWidth}vw`

    document.querySelector('.photo-main').style.borderRadius = 0

  } else{

    document.querySelector('.photo-main').style.borderRadius = `16px`

  }

  if(photoMainWidth >= 100){

    document.querySelector('.photo-main p').style.opacity = 1

  } else{

    document.querySelector('.photo-main p').style.opacity = 0

  }

})

 

우선 title 불투명도와 메인포토의 width를 조절하는 1차방정식을 구해주고 처음에서 position:sticky가 걸릴 때 까지 opacity가 1에서 0으로 되게 코드를 짜주었다.

sticky가 걸리는 구간이 600인 것을 console로 확인하고, 스크롤이 600이상 되었을 때부터 width를 100vw로 조절하는 코드를 짜주었다. 그리고 border-radius도 0으로 조절했다. 원래 16px로 걸려있었는데 그대로 100vw로 커지니까 모서리에 비어서 0으로 조절해주었다.

그리고 width가 100vw가 되면 메인에 있는 멘트가 opacity 1로 되는 코드도 추가해주었다.

 

자바스크립트는 생각보다 쉽게 짰지만 이번엔 position:sticky를 걸어줄 때 overflow를 걸면 안된다는 것을 깜빡하고 시간을 좀 허비했고, position:fixed를 걸 때도 transform, filter, perspective가 none이어야 한다는 사실을 깨달았다. 또한 position:fixed가 contain코드도 먹지 않는 것 같다. 원래 전체적인 부분에 contain:paint를 걸어두었는데 fixed가 되지 않았고, contain:paint를 photo-wrap에만 부분적으로 걸어주니까 fixed가 잘 작동했다.