Skip to content

Commit 5189604

Browse files
num-jsnum-js
committed
Intersection Observer API - get div which is in viewport
1 parent a270978 commit 5189604

File tree

2 files changed

+173
-0
lines changed

2 files changed

+173
-0
lines changed

‎new-js/intersection-observer-api.html

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>intersection-observer-api</title>
9+
</head>
10+
11+
<body>
12+
<section class="container">
13+
<h1>intersection-observer-api - 1</h1>
14+
<p>
15+
Scroll to the bottom of the page. The text will transition in when it becomes visible in the viewport.
16+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum purus non porta ullamcorper.
17+
Vivamus tempus, massa in posuere tincidunt, lorem purus porta est, viverra tristique ipsum eros vitae metus.
18+
Suspendisse sagittis neque eget finibus gravida. Etiam sem urna, pulvinar eu mattis ut, sodales non massa.
19+
Morbi viverra luctus convallis. Curabitur ac massa mauris. Curabitur ut scelerisque nunc. Nulla condimentum
20+
porttitor est ac varius. Sed vel dui sed enim rutrum faucibus vitae eu eros. Curabitur eros leo, euismod ac
21+
ante eu, viverra malesuada diam.
22+
23+
Nullam quis ipsum sagittis augue imperdiet fermentum. Morbi dapibus metus tempus, ullamcorper sem sit amet,
24+
dignissim felis. Curabitur arcu nulla, mattis hendrerit gravida at, sodales et lectus. Phasellus id porta
25+
quam. Sed in ex posuere, molestie mi eu, accumsan lectus. Cras erat massa, mollis vitae varius vel,
26+
hendrerit sit amet mi. Etiam nisl leo, sollicitudin non orci vel, lobortis consectetur metus. Sed cursus
27+
quam sapien, vehicula pharetra quam malesuada a. Curabitur in molestie arcu. Mauris nec leo venenatis,
28+
pulvinar lectus vel, convallis nibh. Aliquam a tellus eu metus hendrerit ultrices at blandit dolor. Praesent
29+
pharetra enim quis nunc bibendum, eu facilisis lacus auctor. Aliquam erat volutpat.
30+
31+
Nam rhoncus vel erat et efficitur. Proin iaculis molestie erat, at sagittis enim finibus non. Aliquam tempus
32+
elit sit amet leo porta, a porttitor erat consequat. Praesent faucibus odio vitae purus pharetra aliquet.
33+
Fusce sit amet interdum ante. Sed tempor, purus quis porttitor ornare, quam purus dapibus neque, dapibus
34+
vulputate lorem ex nec elit. Maecenas in auctor mi, id sodales massa. Sed orci tellus, vestibulum et euismod
35+
iaculis, egestas vitae nulla. Nam a ornare ex, in semper nisl. Aliquam venenatis tortor arcu. Integer
36+
suscipit porta arcu.
37+
38+
Aliquam eu nibh diam. Aliquam non cursus leo. Curabitur facilisis lacus ut nisi fringilla feugiat. Maecenas
39+
augue purus, pretium a magna non, auctor finibus justo. Fusce imperdiet libero ac quam elementum, vel
40+
vehicula nibh malesuada. Aliquam rhoncus quis nunc id aliquet. Duis ac finibus nisi. Donec fringilla tempor
41+
nibh ac tempor. Morbi a lectus vel tellus tincidunt posuere ut vel nisi. Proin aliquam ex libero, congue
42+
accumsan augue eleifend in. Nam sit amet dictum ipsum.
43+
44+
Nulla eu ipsum ultricies, gravida elit quis, egestas urna. Orci varius natoque penatibus et magnis dis
45+
parturient montes, nascetur ridiculus mus. Proin blandit porta sem, eget lobortis sem pellentesque sit amet.
46+
Proin porttitor felis non tempus rhoncus. Cras lobortis accumsan nisi, at faucibus nibh laoreet quis.
47+
Vestibulum nisl urna, ullamcorper ut urna nec, venenatis consectetur massa. Aliquam erat volutpat. Maecenas
48+
facilisis diam eget consectetur elementum. Etiam magna mauris, vulputate quis gravida ut, tristique vel
49+
orci. Mauris condimentum nibh felis, ut feugiat dolor sodales vel. Pellentesque non iaculis sem, vel
50+
ullamcorper tellus. Nam dictum accumsan metus sed imperdiet. Phasellus malesuada nisl urna, quis consectetur
51+
nibh elementum ac. Nulla vitae dolor quis turpis pellentesque molestie a quis mauris. Integer enim leo,
52+
tincidunt vel leo sed, consequat finibus dolor. Phasellus elit libero, cursus non orci quis, suscipit
53+
rhoncus quam.
54+
55+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum purus non porta ullamcorper.
56+
Vivamus tempus, massa in posuere tincidunt, lorem purus porta est, viverra tristique ipsum eros vitae metus.
57+
Suspendisse sagittis neque eget finibus gravida. Etiam sem urna, pulvinar eu mattis ut, sodales non massa.
58+
Morbi viverra luctus convallis. Curabitur ac massa mauris. Curabitur ut scelerisque nunc. Nulla condimentum
59+
porttitor est ac varius. Sed vel dui sed enim rutrum faucibus vitae eu eros. Curabitur eros leo, euismod ac
60+
ante eu, viverra malesuada diam.
61+
Nullam quis ipsum sagittis augue imperdiet fermentum. Morbi dapibus metus tempus, ullamcorper sem sit amet,
62+
dignissim felis. Curabitur arcu nulla, mattis hendrerit gravida at, sodales et lectus. Phasellus id porta
63+
quam. Sed in ex posuere, molestie mi eu, accumsan lectus. Cras erat massa, mollis vitae varius vel,
64+
hendrerit sit amet mi. Etiam nisl leo, sollicitudin non orci vel, lobortis consectetur metus. Sed cursus
65+
quam sapien, vehicula pharetra quam malesuada a. Curabitur in molestie arcu. Mauris nec leo venenatis,
66+
pulvinar lectus vel, convallis nibh. Aliquam a tellus eu metus hendrerit ultrices at blandit dolor. Praesent
67+
pharetra enim quis nunc bibendum, eu facilisis lacus auctor. Aliquam erat volutpat.
68+
69+
Nam rhoncus vel erat et efficitur. Proin iaculis molestie erat, at sagittis enim finibus non. Aliquam tempus
70+
elit sit amet leo porta, a porttitor erat consequat. Praesent faucibus odio vitae purus pharetra aliquet.
71+
Fusce sit amet interdum ante. Sed tempor, purus quis porttitor ornare, quam purus dapibus neque, dapibus
72+
vulputate lorem ex nec elit. Maecenas in auctor mi, id sodales massa. Sed orci tellus, vestibulum et euismod
73+
iaculis, egestas vitae nulla. Nam a ornare ex, in semper nisl. Aliquam venenatis tortor arcu. Integer
74+
suscipit porta arcu.
75+
</p>
76+
<h2 class="animated-text">Animated Text</h2>
77+
78+
</section>
79+
80+
<h1>NNNNNNN</h1>
81+
82+
<section class="container">
83+
<h1>intersection-observer-api - 2</h1>
84+
<p>
85+
Scroll to the bottom of the page. The text will transition in when it becomes visible in the viewport.
86+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum purus non porta ullamcorper.
87+
Vivamus tempus, massa in posuere tincidunt, lorem purus porta est, viverra tristique ipsum eros vitae metus.
88+
Suspendisse sagittis neque eget finibus gravida. Etiam sem urna, pulvinar eu mattis ut, sodales non massa.
89+
Morbi viverra luctus convallis. Curabitur ac massa mauris. Curabitur ut scelerisque nunc. Nulla condimentum
90+
porttitor est ac varius. Sed vel dui sed enim rutrum faucibus vitae eu eros. Curabitur eros leo, euismod ac
91+
ante eu, viverra malesuada diam.
92+
93+
Nullam quis ipsum sagittis augue imperdiet fermentum. Morbi dapibus metus tempus, ullamcorper sem sit amet,
94+
dignissim felis. Curabitur arcu nulla, mattis hendrerit gravida at, sodales et lectus. Phasellus id porta
95+
quam. Sed in ex posuere, molestie mi eu, accumsan lectus. Cras erat massa, mollis vitae varius vel,
96+
hendrerit sit amet mi. Etiam nisl leo, sollicitudin non orci vel, lobortis consectetur metus. Sed cursus
97+
quam sapien, vehicula pharetra quam malesuada a. Curabitur in molestie arcu. Mauris nec leo venenatis,
98+
pulvinar lectus vel, convallis nibh. Aliquam a tellus eu metus hendrerit ultrices at blandit dolor. Praesent
99+
pharetra enim quis nunc bibendum, eu facilisis lacus auctor. Aliquam erat volutpat.
100+
101+
Nam rhoncus vel erat et efficitur. Proin iaculis molestie erat, at sagittis enim finibus non. Aliquam tempus
102+
elit sit amet leo porta, a porttitor erat consequat. Praesent faucibus odio vitae purus pharetra aliquet.
103+
Fusce sit amet interdum ante. Sed tempor, purus quis porttitor ornare, quam purus dapibus neque, dapibus
104+
vulputate lorem ex nec elit. Maecenas in auctor mi, id sodales massa. Sed orci tellus, vestibulum et euismod
105+
iaculis, egestas vitae nulla. Nam a ornare ex, in semper nisl. Aliquam venenatis tortor arcu. Integer
106+
suscipit porta arcu.
107+
108+
Aliquam eu nibh diam. Aliquam non cursus leo. Curabitur facilisis lacus ut nisi fringilla feugiat. Maecenas
109+
augue purus, pretium a magna non, auctor finibus justo. Fusce imperdiet libero ac quam elementum, vel
110+
vehicula nibh malesuada. Aliquam rhoncus quis nunc id aliquet. Duis ac finibus nisi. Donec fringilla tempor
111+
nibh ac tempor. Morbi a lectus vel tellus tincidunt posuere ut vel nisi. Proin aliquam ex libero, congue
112+
accumsan augue eleifend in. Nam sit amet dictum ipsum.
113+
114+
Nulla eu ipsum ultricies, gravida elit quis, egestas urna. Orci varius natoque penatibus et magnis dis
115+
parturient montes, nascetur ridiculus mus. Proin blandit porta sem, eget lobortis sem pellentesque sit amet.
116+
Proin porttitor felis non tempus rhoncus. Cras lobortis accumsan nisi, at faucibus nibh laoreet quis.
117+
Vestibulum nisl urna, ullamcorper ut urna nec, venenatis consectetur massa. Aliquam erat volutpat. Maecenas
118+
facilisis diam eget consectetur elementum. Etiam magna mauris, vulputate quis gravida ut, tristique vel
119+
orci. Mauris condimentum nibh felis, ut feugiat dolor sodales vel. Pellentesque non iaculis sem, vel
120+
ullamcorper tellus. Nam dictum accumsan metus sed imperdiet. Phasellus malesuada nisl urna, quis consectetur
121+
nibh elementum ac. Nulla vitae dolor quis turpis pellentesque molestie a quis mauris. Integer enim leo,
122+
tincidunt vel leo sed, consequat finibus dolor. Phasellus elit libero, cursus non orci quis, suscipit
123+
rhoncus quam.
124+
125+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum purus non porta ullamcorper.
126+
Vivamus tempus, massa in posuere tincidunt, lorem purus porta est, viverra tristique ipsum eros vitae metus.
127+
Suspendisse sagittis neque eget finibus gravida. Etiam sem urna, pulvinar eu mattis ut, sodales non massa.
128+
Morbi viverra luctus convallis. Curabitur ac massa mauris. Curabitur ut scelerisque nunc. Nulla condimentum
129+
porttitor est ac varius. Sed vel dui sed enim rutrum faucibus vitae eu eros. Curabitur eros leo, euismod ac
130+
ante eu, viverra malesuada diam.
131+
Nullam quis ipsum sagittis augue imperdiet fermentum. Morbi dapibus metus tempus, ullamcorper sem sit amet,
132+
dignissim felis. Curabitur arcu nulla, mattis hendrerit gravida at, sodales et lectus. Phasellus id porta
133+
quam. Sed in ex posuere, molestie mi eu, accumsan lectus. Cras erat massa, mollis vitae varius vel,
134+
hendrerit sit amet mi. Etiam nisl leo, sollicitudin non orci vel, lobortis consectetur metus. Sed cursus
135+
quam sapien, vehicula pharetra quam malesuada a. Curabitur in molestie arcu. Mauris nec leo venenatis,
136+
pulvinar lectus vel, convallis nibh. Aliquam a tellus eu metus hendrerit ultrices at blandit dolor. Praesent
137+
pharetra enim quis nunc bibendum, eu facilisis lacus auctor. Aliquam erat volutpat.
138+
139+
Nam rhoncus vel erat et efficitur. Proin iaculis molestie erat, at sagittis enim finibus non. Aliquam tempus
140+
elit sit amet leo porta, a porttitor erat consequat. Praesent faucibus odio vitae purus pharetra aliquet.
141+
Fusce sit amet interdum ante. Sed tempor, purus quis porttitor ornare, quam purus dapibus neque, dapibus
142+
vulputate lorem ex nec elit. Maecenas in auctor mi, id sodales massa. Sed orci tellus, vestibulum et euismod
143+
iaculis, egestas vitae nulla. Nam a ornare ex, in semper nisl. Aliquam venenatis tortor arcu. Integer
144+
suscipit porta arcu.
145+
</p>
146+
<h2 class="animated-text">Animated Text</h2>
147+
148+
</section>
149+
150+
151+
<script src="./intersection-observer-api.js"></script>
152+
</body>
153+
154+
</html>

‎new-js/intersection-observer-api.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const target = document.querySelectorAll('.container');
2+
3+
function handleIntersection(entries) {
4+
entries.map((entry) => {
5+
if (entry.isIntersecting) {
6+
entry.target.classList.add('visible')
7+
console.log(entry)
8+
} else {
9+
entry.target.classList.remove('visible')
10+
}
11+
});
12+
}
13+
14+
const observer = new IntersectionObserver(handleIntersection);
15+
16+
for (let index = 0; index < target.length; index++) {
17+
const element = target[index];
18+
observer.observe(element);
19+
}

0 commit comments

Comments
 (0)