๋ฐ์ํ
์ ์ฒด ์ฝ๋
<body>
<style>
body {
background-color: black;
height: 6000px;
}
div {
margin-top: 1000px;
color: white;
text-align: center;
opacity: 0;
transition: all 1s;
transform: rotate(-720deg);
}
</style>
<div><h1>์๋
ํ์ธ์.</h1></div>
<div><h1>์คํฌ๋กค๋ฐ ์ด๋ฒคํธ ํ
์คํธ</h1></div>
<div><h1>observer ํ
์คํธ์
๋๋ค.</h1></div>
<div>
<img
src="data:image/jpeg;base64,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"
alt="cute cat"
</div>
<script>
let observer = new IntersectionObserver((e) => {
e.forEach((entry) => {
// ํ๋ฉด์ ๋ณด์ผ๋๋ง ์คํ
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
entry.target.style.transform = "rotate(0deg)";
}
entry.intersectionRatio; // ํ๋ฉด์ ๋ช ํผ์ผํธ๊ฐ ๋ณด์ด๋์ง
});
});
let div = document.querySelectorAll("div");
observer.observe(div[0]);
observer.observe(div[1]);
observer.observe(div[2]);
observer.observe(div[3]);
</script>
</body>
์๋กญ๊ฒ ์๊ฒ ๋ ์
1. IntersectionObserver ๋ ํ๋ฉด์ ๋ณด์ผ๋, ํ๋ฉด์์ ๋๊ฐ ๋ 2๋ฒ ์คํ๋๋ค.
๊ทธ๋์ ํ๋ฉด์ ๋ณด์ผ ๋๋ง ์คํํ๊ณ ์ถ๋ค๋ฉด ์๋์ ์ฝ๋์ฒ๋ผ isIntersection ์ ํ์ฉํด์ผํ๋ค.
if (entry.isIntersecting) {
}
2. intersectionRatio ๋ ํ๋ฉด์ ๋ช ํผ์ผํธ๊ฐ ๋ณด์ด๋์ง ์ปจํธ๋กค ํ ์ ์๋ค.
๋ฐ์ํ
'๐ฅFrontEnd' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| jest ์ฉ๋๋ณ ๋งค์ฒ ์์๋ณด๊ธฐ (0) | 2024.09.21 |
|---|---|
| Jest ๊ธฐ๋ณธ ๊ณต๋ถํ๊ธฐ, ์ฝ๊ฒ Jest๋ก ํ ์คํธํ๋ ์ต์คํ ์ ์ถ์ฒ (0) | 2024.09.09 |
| ์น ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ ๋๊ตฌ ์ถ์ฒ (0) | 2024.07.27 |
| jest, beforeAll, afterAll (0) | 2023.05.01 |
| jest ๊ธฐ๋ณธ ๊ณต๋ถ (0) | 2023.04.28 |
