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 >
0 commit comments