[JavaScript] IntersectionObserver API 활용 이벤트 처리
2023. 7. 17. 19:02ㆍTip
728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 200px;
width: 200px;
border-radius: 10%;
background-color: bisque;
border: 2.5px solid tomato;
transition: all 0.5s ease-in-out;
transform: scale(1.5);
opacity: 0;
margin: 10px auto 10px auto;
}
.visible {
transform: scale(1);
opacity: 1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
<script>
document.body.onload = function () {
const squares = document.querySelectorAll("div")
const observer = new IntersectionObserver(
squares =>
squares.forEach(square => {
if (square.isIntersecting) square.target.classList.add("visible")
else square.target.classList.remove("visible")
}),
{ threshold: 0.3 }
)
squares.forEach((square) => observer.observe(square))
}
</script>
</html>728x90
'Tip' 카테고리의 다른 글
| 이력서 작성 요령 (2) | 2024.01.08 |
|---|---|
| [Python] BOJ 1874번: 스택 수열 (0) | 2023.07.21 |
| [Python/pandas/scikit-learn] 빅데이터 분석기사 실기 유형2 풀이 샘플 (0) | 2023.07.17 |
| [Python] BOJ 10815번: 숫자 카드 (0) | 2023.07.16 |
| [JavaScript] LocalStorage Basic (0) | 2023.07.13 |