[JAVASCRIPT] div마다 스크롤 속도 다르게 하기

 

스크롤할 때 div가 내려가는 속도가 각각 다르게 할 수 있다.

 

HTML

<div class="section">

  <div class="left">

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

  </div>

  <div class="right">

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

  </div>

</div>

 

HTML은 간단하게 좌우에 박스만 두었다.

 

CSS

.section{

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  margin-top: 500px;

  margin-bottom: 500px;

}

.left,

.right{

  width: 50%;

  justify-content: center;

  display: flex;

  flex-direction: column;

  margin: 100px;

}

.left{

  align-items: end;

}

.right{

  align-items: start;

}

.right{

  transform: translateY(100px);

}

.left .box,

.right .box{

  width: 300px;

  height: 400px;

  border: 5px solid black;

  border-radius: 12px;

  margin-top: 100px;

}

 

CSS 또한 box의 첫 높낮이 위치가 다르게 설정하고 박스의 크기와 선만 설정해주었다.

 

JAVASCRIPT

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

  let rightSpeed = window.scrollY * 0.4;

  let leftSpeed = window.scrollY * 0.1;

  document.querySelector('.right').style.transform = `translateY(-${rightSpeed}px + 100px)`

  document.querySelector('.left').style.transform = `translateY(${leftSpeed}px)`

});

 

처음에 자바스크립트를 짤 때 스크롤의 속도를 어떻게 조절하지로 접근했는데 다른 방면으로 계속 생각해보니 스크롤의 내려가는 속도가 1이라고 가정하면 스크롤 하는 동안에 Y값으로 조금씩 옮겨주면 스크롤 속도가 달라보이지 않을까 하고 작성해보니 생각이 맞았다.

 

생각보다 많이 간단했지만 생각을 달리 하는 과정이 복잡했기 때문에 코드의 양에 비해 걸린 시간이 너무 길었다. 이보다 조금 더 자연스럽고 티가 많이 나게 스크롤 속도가 달라지게 할 수도 있을 것 같지만 이 코드를 가지고 예쁘게 스타일링해서 옮겨놓으면 꽤 멋진 홈페이지가 나올 수 있겠다라는 생각이 들었다.