코딩 애플 영상은 짧지만 임팩트 있게 머리에 콕콕 박아줘서 너무 좋은 것 같다.
IntersectionObserver 기능으로 스크롤 애니메이션을 쉽게 만들 수 있다고 해서 따라 해 보았다.
(반응형 웹사이트 구현할 때 참고하면 좋을 것 같다. 영상에서는 내년쯤 scroll timeline 기능이 새로 출시된다는 데 추후 공부해보면 좋을 것 같다.)
🛠️코드🛠️
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<style>
body {
background: #eeeeee;
height: 6000px;
font-family: "Pretandard";
}
div {
margin-top: 1000px;
color: black;
text-align: center;
opacity: 0;
transition: all 1s;
}
</style>
<body>
<div>
<h1>new InterectionObserver를 사용해보겠습니다.</h1>
</div>
<div>
<h1>이걸로 뭘 할 수 있냐구요?</h1>
</div>
<div>
<h1>scroll animation을 쉽게 구현 할 수 있습니다.</h1>
</div>
<div>
<h1>엄청나죠?</h1>
</div>
<script>
let observer = new IntersectionObserver((e) => {
console.log(e); // 현재 감시 중인 모든 div 박스가 출력됨
e.forEach((box) => {
// 감시 중인 box가 등장 & 퇴장 시 실행됨 => 이중으로 동작함
// box.target.style.color = "red";
// 화면에 보일 때만 style을 변경하고 싶을 때는
if (box.isIntersecting) {
box.target.style.opacity = 1;
box.target.style.color = "red";
} else {
box.target.style.opacity = 0;
box.target.style.color = "black";
}
box.intersectionRatio // box가 화면에 몇 퍼센트 보이고 있는지 출력해줌 (50% === 0.5)
})
});
let div = document.querySelectorAll("div");
// .observe() : HTML 요소가 화면에 등장하는 지 감시해 주는 역할
// 파라미터에 HTML 요소를 넣어주면 된다.
observer.observe(div[0]);
observer.observe(div[1]);
observer.observe(div[2]);
observer.observe(div[3]);
</script>
</body>
</html>
이거 싫으면 내년쯤 나오는 CSS에 scroll timeline 속성을 사용하면 좋다고 한다.
+ 위 예제는 JS 버전이라서 React에서는 어떻게 사용할 수 있을까 찾아보니 Intersection Observer API가 있어서 무한 스크롤 구현 할 때 유용하다고 한다.
React 무한 스크롤 구현하기 with Intersection Observer
🔥🔥 Intersection Observer API를 이용한 React 무한 스크롤(Infinite Scroll) 만들기!
velog.io
'더 알아보기 > 기능' 카테고리의 다른 글
| 반응형 사이드바 구현하기 (0) | 2022.11.07 |
|---|---|
| [React] IntersectionObserver를 사용하여 스크롤 애니메이션 구현하기 (0) | 2022.11.04 |
| [React] 날짜, 시간 선택 달력 만들기 (ver.시행착오) (0) | 2022.10.13 |
| [React] 버튼 눌러서 프린트 출력하기 (0) | 2022.09.14 |
| [JS] window.print()를 사용하여 프린트 영역 출력하기 (0) | 2022.09.08 |
댓글