HTML / CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Card Slide</title>
<style>
.card-background {
height: 3000px;
margin-top: 800px;
margin-bottom: 1600px;
}
.card-box img {
display: block;
margin: auto;
max-width: 80%;
}
.card-box {
position: sticky;
top: 200px;
margin-top: 200px;
transition: all 0.2;
}
</style>
</head>
<body>
<div class="card-background">
<div class="card-box">
<img src="/1.png" />
</div>
<div class="card-box">
<img src="/2.png" />
</div>
<div class="card-box">
<img src="/3.png" />
</div>
</div>
<script src="card.js"></script>
</body>
</html>JS
// let debouncing;
// window.addEventListener("scroll", () => {
// if (debouncing) {
// clearTimeout(debouncing);
// }
// debouncing = setTimeout(scrollEvent, 20);
// });
// 디바운싱
let throttling;
window.addEventListener("scroll", () => {
if (!throttling) {
throttling = setTimeout(() => {
throttling = null;
scrollEvent();
}, 20);
}
});
// 쓰로틀링
function scrollEvent() {
let scrollValue = document.querySelector("html").scrollTop;
console.log(scrollValue);
let opacityChangeFirst = (-1 / 700) * scrollValue + 13 / 7;
// 600~1300 일때 y의 값이 1에서 0으로 바뀌는 1차함수
let scaleChangeFirst = (-3 / 7000) * scrollValue + 44 / 35;
// 600~1300 일때 z의 값이 1에서 0.7이 될 수 있도록 하는 1차함수
document.querySelectorAll(".card-box")[0].style.opacity = opacityChangeFirst;
document.querySelectorAll(
".card-box"
)[0].style.transform = `scale(${scaleChangeFirst})`;
let opacityChangeSecond = (-1 / 500) * scrollValue + 16 / 5;
let scaleChangeSecond = (-3 / 5000) * scrollValue + 83 / 50;
// 1100~ 1600
document.querySelectorAll(".card-box")[1].style.opacity = opacityChangeSecond;
document.querySelectorAll(
".card-box"
)[1].style.transform = `scale(${scaleChangeSecond})`;
}결과
설명
스크롤 이벤트로 복습하는 디바운싱, 쓰로틀링
디바운싱과 쓰로틀링의 차이는 전에 공부한적이 있다
그럼에도 확실한 차이를 경험해본적은 없었는데 오늘 확실하게 알게되었다
디바운싱을 적용한 모습
확실히 스크롤 이벤트가 끝나면 카운터가 적용된다
쓰로틀링을 적용한 모습
스크롤을 계속 하더라도 짧은 단위시간의 텀을 두고 끊어준다
변수를 1차 함수로 설정하면 어떻게 될까 ?
변수에 계산식이나 함수를 담을 수 있다는 것은 원래 알고있었지만
이걸 이용해서 이렇게 기능을 구현할 수 있다는게 정말 신기하고 재밌었다 !
function scrollEvent() {
let scrollValue = document.querySelector("html").scrollTop;
console.log(scrollValue);
let opacityChangeFirst = (-1 / 700) * scrollValue + 13 / 7;
// 600~1300 일때 값이 1에서 0으로 바뀌는 1차함수
let scaleChangeFirst = (-3 / 7000) * scrollValue + 44 / 35;
// 600~1300 일때 값이 1에서 0.7이 될 수 있도록 하는 1차함수
document.querySelectorAll(".card-box")[0].style.opacity = opacityChangeFirst;
document.querySelectorAll(
".card-box"
)[0].style.transform = `scale(${scaleChangeFirst})`;
내가 스크롤 한 길이가 600 일때, 그러니까 처음 stick area 에 도달했을 때
opacity 1, 그러다가 스크롤을 계속 내려서 1300 (다음 이미지가 덮을 때)
에 도달했을때 opacity 0이 될 수 있도록 변수를 설정하면 되겠다.
transform : scale 값은 600일때 1 -> 1300일때 0.7 로 변할 수 있게 설정했다
구하고자 하는 값은 a : 기울기 / b : 절편
x값과 y값을 알고있으므로 대입해보면 된다
1 = a * 600 + b
0 = a * 1300 + b
a = -1/700
b = 13/7그래프로 그려보려다가
얕은 수학실력만 들통나버리고 말았다
기울기가 -1/700 인 함수라니
얕은 수학실력으로 방정식을 푸는 건 굉장히 어려운 일이므로
https://ko.numberempire.com/equationsolver.php
사이트의 도움을 받았다 🥳
그런데..
이거 할때마다 일일히 계산을 해줘야 하는걸까 ?
Always, we are friend 🧡