반응형
250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- classList
- scrollevent
- Animation
- Sticky
- localstorage
- Hover
- For
- insertAdjacentHTML
- 반복문
- html
- 이벤트리스너
- width
- scroll
- swiper
- React
- getBoundingClientRect
- mousemove
- 확장성
- 스크롤
- JavaScript
- NAV
- pointermove
- input
- scrollY
- css
- 애니메이션
- NodeList
- swiperjs
- forEach
- addEventListener
Archives
- Today
- Total
ZeroToHunnit Coding
[JAVASCRIPT] div마다 스크롤 속도 다르게 하기 본문
728x90
반응형
스크롤할 때 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값으로 조금씩 옮겨주면 스크롤 속도가 달라보이지 않을까 하고 작성해보니 생각이 맞았다.
생각보다 많이 간단했지만 생각을 달리 하는 과정이 복잡했기 때문에 코드의 양에 비해 걸린 시간이 너무 길었다. 이보다 조금 더 자연스럽고 티가 많이 나게 스크롤 속도가 달라지게 할 수도 있을 것 같지만 이 코드를 가지고 예쁘게 스타일링해서 옮겨놓으면 꽤 멋진 홈페이지가 나올 수 있겠다라는 생각이 들었다.
728x90
반응형
'JAVASCRIPT' 카테고리의 다른 글
[JAVASCRIPT] 마우스커서 따라 움직이는 효과 (0) | 2023.12.26 |
---|---|
[Javascript] 이벤트리스너 input, change의 차이 (0) | 2023.12.25 |
[JAVASCRIPT] SwiperJs, 스크롤하면 세로로 움직이는 사진,글자 (2) | 2023.12.23 |
[Javascript] 0에서 특정 숫자까지 자동으로 커지게 하기 CountUp (0) | 2023.12.20 |
[Javascript] 스크롤에 따라 서서히 div 크기 달라지게 하기 (2) | 2023.12.18 |