Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,480 --> 00:00:03,443
Let's implement another really cool
2
2
00:00:03,443 --> 00:00:08,443
and modern feature using the intersection observer API.
3
3
00:00:08,520 --> 00:00:09,353
And this time,
4
4
00:00:09,353 --> 00:00:13,180
we're gonna reveal elements as we scroll close to them.
5
5
00:00:13,180 --> 00:00:17,090
And this effect can give your pages a very nice touch.
6
6
00:00:17,090 --> 00:00:18,420
And you can, in fact,
7
7
00:00:18,420 --> 00:00:21,813
easily implement it without any external library.
8
8
00:00:23,200 --> 00:00:25,560
So the effect that I mean is this one
9
9
00:00:25,560 --> 00:00:27,270
here with the sections.
10
10
00:00:27,270 --> 00:00:28,793
So watch what happens here.
11
11
00:00:30,210 --> 00:00:33,750
So you see that we basically reveal each section
12
12
00:00:33,750 --> 00:00:34,963
as we approach it.
13
13
00:00:36,190 --> 00:00:39,973
Alright, so I'm not talking about these images here yet.
14
14
00:00:40,820 --> 00:00:43,140
So I'm just talking about the sections.
15
15
00:00:43,140 --> 00:00:46,103
So see how it basically slides in like this.
16
16
00:00:47,640 --> 00:00:50,410
Now, right, and so that's what we're gonna do now,
17
17
00:00:50,410 --> 00:00:52,147
with all these four sections.
18
18
00:00:52,147 --> 00:00:56,550
Now, the animation itself actually comes from CSS.
19
19
00:00:56,550 --> 00:00:57,950
And so once more,
20
20
00:00:57,950 --> 00:01:01,510
we will actually achieve this by simply adding a class
21
21
00:01:01,510 --> 00:01:04,720
to each of these sections as we approach them.
22
22
00:01:04,720 --> 00:01:07,580
And so we will do that using the intersection
23
23
00:01:07,580 --> 00:01:09,930
observer API once again,
24
24
00:01:09,930 --> 00:01:13,313
because that's really the perfect job for this tool.
25
25
00:01:14,530 --> 00:01:19,530
Okay, so let's actually take a look at our CSS here.
26
26
00:01:22,330 --> 00:01:23,480
So I'm gonna write
27
27
00:01:23,480 --> 00:01:27,940
or to search for a section hidden.
28
28
00:01:27,940 --> 00:01:30,460
So this is the class here.
29
29
00:01:30,460 --> 00:01:31,890
And so basically,
30
30
00:01:31,890 --> 00:01:34,743
all the sections by default have this class.
31
31
00:01:36,120 --> 00:01:37,793
So let me show that to you also.
32
32
00:01:38,930 --> 00:01:41,050
Well, actually, they don't.
33
33
00:01:41,050 --> 00:01:42,000
And of course, they don't,
34
34
00:01:42,000 --> 00:01:44,250
because then we could not see them right now.
35
35
00:01:45,260 --> 00:01:48,880
Okay, so we have to add them now as we build this,
36
36
00:01:48,880 --> 00:01:52,300
and so this will basically give them an opacity of zero,
37
37
00:01:52,300 --> 00:01:54,490
and it will move them a little bit down.
38
38
00:01:54,490 --> 00:01:57,350
And so then when we remove this here,
39
39
00:01:57,350 --> 00:02:00,670
it will then move them back up to a translate
40
40
00:02:00,670 --> 00:02:03,760
of zero rem, basically.
41
41
00:02:03,760 --> 00:02:07,350
Okay, so what I'm gonna do is to start
42
42
00:02:07,350 --> 00:02:09,100
by adding this section,
43
43
00:02:09,100 --> 00:02:11,230
or this class, actually,
44
44
00:02:11,230 --> 00:02:14,110
to all the four sections that we want to apply
45
45
00:02:14,110 --> 00:02:16,043
this effect to.
46
46
00:02:17,270 --> 00:02:21,380
So this one here, then, the next one,
47
47
00:02:29,330 --> 00:02:34,330
number three, and number four, yeah.
48
48
00:02:36,720 --> 00:02:38,653
And so now all of them will disappear.
49
49
00:02:39,870 --> 00:02:42,040
Okay, they are simply invisible,
50
50
00:02:42,040 --> 00:02:43,040
they're still there.
51
51
00:02:43,040 --> 00:02:45,650
So we are still like displaying them.
52
52
00:02:45,650 --> 00:02:49,030
And so they preserve their height, basically.
53
53
00:02:49,030 --> 00:02:50,990
But they are now invisible.
54
54
00:02:50,990 --> 00:02:54,130
And so our job is now to remove this class
55
55
00:02:54,130 --> 00:02:57,853
as we approach each of these sections.
56
56
00:03:03,050 --> 00:03:04,923
So reveal sections.
57
57
00:03:07,250 --> 00:03:08,783
So let's say a section,
58
58
00:03:10,170 --> 00:03:15,170
observer, new intersection observer,
59
59
00:03:16,320 --> 00:03:17,890
and then here, the callback,
60
60
00:03:17,890 --> 00:03:19,513
and that's already created here.
61
61
00:03:21,210 --> 00:03:26,210
Let's call it reveal section, like this entries.
62
62
00:03:32,110 --> 00:03:34,723
And this time, we will need the observer.
63
63
00:03:35,620 --> 00:03:37,990
And you will see in a minute why that is,
64
64
00:03:37,990 --> 00:03:39,370
so observer.
65
65
00:03:39,370 --> 00:03:40,550
And of course,
66
66
00:03:40,550 --> 00:03:42,970
these parameters here, as always,
67
67
00:03:42,970 --> 00:03:45,870
can have any name that we want, right.
68
68
00:03:45,870 --> 00:03:48,020
So just like in the callback functions
69
69
00:03:48,020 --> 00:03:49,600
of the array methods,
70
70
00:03:49,600 --> 00:03:51,860
where we can also give them any name.
71
71
00:03:51,860 --> 00:03:53,350
And here, it's the same,
72
72
00:03:53,350 --> 00:03:55,490
but this is kind of the standard.
73
73
00:03:55,490 --> 00:03:58,163
And so that's why I keep doing it like this.
74
74
00:03:59,200 --> 00:04:01,270
So reveal section,
75
75
00:04:01,270 --> 00:04:03,603
and then the object of options.
76
76
00:04:04,650 --> 00:04:08,770
So we want to observe all the four sections actually
77
77
00:04:08,770 --> 00:04:10,250
in this case.
78
78
00:04:10,250 --> 00:04:12,070
And it is indeed possible
79
79
00:04:12,070 --> 00:04:15,800
to observe them all using the same observer.
80
80
00:04:15,800 --> 00:04:18,040
So let's select all the sections.
81
81
00:04:18,040 --> 00:04:21,450
And then we will observe these as multiple targets,
82
82
00:04:21,450 --> 00:04:24,153
all using this observer that we just created here.
83
83
00:04:26,920 --> 00:04:31,920
So all sections is document dot query selector all
84
84
00:04:37,850 --> 00:04:40,610
and so that's simply the class section.
85
85
00:04:40,610 --> 00:04:42,940
And now we can loop over this node list
86
86
00:04:45,860 --> 00:04:46,893
with for each.
87
87
00:04:48,110 --> 00:04:50,530
So we use for each whenever we want to do
88
88
00:04:50,530 --> 00:04:54,693
something which does not involve creating a new array.
89
89
00:04:56,810 --> 00:04:59,230
And so here the callback function,
90
90
00:04:59,230 --> 00:05:02,430
I will call it section and then just like before,
91
91
00:05:02,430 --> 00:05:06,510
we will use our observer to observe section.
92
92
00:05:09,350 --> 00:05:12,730
And actually, since we're already looping over all
93
93
00:05:12,730 --> 00:05:17,030
these sections, it would probably be a better idea to add
94
94
00:05:17,030 --> 00:05:18,650
this class here.
95
95
00:05:18,650 --> 00:05:22,320
So this section hidden, also using JavaScript,
96
96
00:05:22,320 --> 00:05:26,250
so not do it manually here in the HTML, and instead,
97
97
00:05:26,250 --> 00:05:27,680
do it in JavaScript.
98
98
00:05:27,680 --> 00:05:30,120
Because some people actually disable JavaScript
99
99
00:05:30,120 --> 00:05:31,420
in their browser.
100
100
00:05:31,420 --> 00:05:33,090
And then for those users,
101
101
00:05:33,090 --> 00:05:35,430
the page wouldn't really be visible.
102
102
00:05:35,430 --> 00:05:39,620
Right, they would then have no way of removing this class.
103
103
00:05:39,620 --> 00:05:42,400
And so this is probably not a good idea.
104
104
00:05:42,400 --> 00:05:44,330
So I will copy it now.
105
105
00:05:44,330 --> 00:05:47,163
And then I will just undo everything we did.
106
106
00:05:49,970 --> 00:05:54,970
So yeah, so now it should be back to normal.
107
107
00:05:56,020 --> 00:05:57,130
And it is.
108
108
00:05:57,130 --> 00:06:00,780
And now I will do that programmatically, here.
109
109
00:06:00,780 --> 00:06:02,033
So that's a lot better.
110
110
00:06:03,235 --> 00:06:05,833
I don't know why I didn't think of that right away.
111
111
00:06:06,750 --> 00:06:08,910
So classlist add,
112
112
00:06:08,910 --> 00:06:11,940
and so this is nothing new at this point.
113
113
00:06:11,940 --> 00:06:13,160
Let's see.
114
114
00:06:13,160 --> 00:06:15,573
And now they are back to being hidden.
115
115
00:06:17,410 --> 00:06:22,410
So let's start by taking care of here of this options.
116
116
00:06:22,410 --> 00:06:26,340
And as always, the route is gonna be the viewport.
117
117
00:06:26,340 --> 00:06:29,830
So now, and then the threshold,
118
118
00:06:29,830 --> 00:06:33,280
we will set it to something greater than zero.
119
119
00:06:33,280 --> 00:06:34,580
And that's because we don't want
120
120
00:06:34,580 --> 00:06:36,030
to show the section right
121
121
00:06:36,030 --> 00:06:39,400
as it enters the viewport, but a little bit later.
122
122
00:06:39,400 --> 00:06:44,400
So let's say 15%, for example, for now,
123
123
00:06:44,660 --> 00:06:47,930
so this will make it so that the section is only revealed
124
124
00:06:47,930 --> 00:06:51,260
when it is 15% visible.
125
125
00:06:51,260 --> 00:06:52,540
All right.
126
126
00:06:52,540 --> 00:06:54,970
So this is all of the setup.
127
127
00:06:54,970 --> 00:06:57,660
And now let's create basically the logic.
128
128
00:06:57,660 --> 00:06:59,850
So in here, and once again,
129
129
00:06:59,850 --> 00:07:01,800
we have only one threshold.
130
130
00:07:01,800 --> 00:07:03,620
And so let's get that entry
131
131
00:07:03,620 --> 00:07:06,553
from the entries using destructuring.
132
132
00:07:13,630 --> 00:07:15,810
And, as always,
133
133
00:07:15,810 --> 00:07:17,773
let's start by logging the entry here.
134
134
00:07:21,780 --> 00:07:25,330
Give us some more space, this 90 is coming
135
135
00:07:25,330 --> 00:07:26,583
from up here.
136
136
00:07:28,890 --> 00:07:30,613
So we don't need that anymore.
137
137
00:07:32,040 --> 00:07:35,740
Now, okay, and so now we see that some section here
138
138
00:07:35,740 --> 00:07:39,810
is already being intersected at zero percent.
139
139
00:07:39,810 --> 00:07:41,940
And so now actually this target element
140
140
00:07:41,940 --> 00:07:43,123
will become important.
141
141
00:07:44,130 --> 00:07:46,360
And well, right now there is no target.
142
142
00:07:46,360 --> 00:07:50,100
Because this first, so to say event
143
143
00:07:50,100 --> 00:07:52,393
is always triggered no matter what.
144
144
00:07:53,360 --> 00:07:56,650
So let's go a little bit until 15%
145
145
00:07:56,650 --> 00:07:59,193
of the first row is intersected.
146
146
00:08:00,250 --> 00:08:02,410
And of course, that intersection happens,
147
147
00:08:02,410 --> 00:08:04,350
even though we cannot see it.
148
148
00:08:04,350 --> 00:08:05,740
So we don't see the row.
149
149
00:08:05,740 --> 00:08:08,543
But still it is now 15% intersecting,
150
150
00:08:11,225 --> 00:08:13,623
and now the target here is actually important.
151
151
00:08:15,830 --> 00:08:18,573
And so here, we actually have the classname,
152
152
00:08:19,750 --> 00:08:21,870
so section and section hidden,
153
153
00:08:21,870 --> 00:08:25,620
and so this means that actually a certain section did now
154
154
00:08:25,620 --> 00:08:27,093
intersect the viewport.
155
155
00:08:28,990 --> 00:08:30,710
Maybe we can see the ID.
156
156
00:08:30,710 --> 00:08:32,360
Oh, yeah, here it is.
157
157
00:08:32,360 --> 00:08:34,820
So it was the section one indeed.
158
158
00:08:34,820 --> 00:08:36,623
So the one with the ID of one.
159
159
00:08:39,770 --> 00:08:42,680
And this target will now actually be important,
160
160
00:08:42,680 --> 00:08:45,040
because now we want to make exactly
161
161
00:08:45,040 --> 00:08:46,540
this section visible,
162
162
00:08:46,540 --> 00:08:49,290
not all of the sections, right.
163
163
00:08:49,290 --> 00:08:51,390
But we are observing all of the sections
164
164
00:08:51,390 --> 00:08:56,390
here with this same observer here, right.
165
165
00:08:56,730 --> 00:08:58,810
And so now we need a way of knowing,
166
166
00:08:58,810 --> 00:09:00,660
which is the section that actually
167
167
00:09:00,660 --> 00:09:02,690
intersected the viewport.
168
168
00:09:02,690 --> 00:09:05,283
And so that's what we can use the target for.
169
169
00:09:06,550 --> 00:09:08,403
And so let's do that.
170
170
00:09:09,320 --> 00:09:12,373
So that's at entry dot target.
171
171
00:09:13,210 --> 00:09:14,670
And now we can,
172
172
00:09:14,670 --> 00:09:16,880
as always manipulate that class list
173
173
00:09:17,960 --> 00:09:22,960
and remove this section,
174
174
00:09:23,720 --> 00:09:26,193
or this class that hides it.
175
175
00:09:28,690 --> 00:09:31,023
And you'll see that it's already working.
176
176
00:09:32,400 --> 00:09:36,040
Well, it actually happens a bit too soon, it appears.
177
177
00:09:36,040 --> 00:09:37,743
But on this one, it was perfect.
178
178
00:09:38,620 --> 00:09:40,580
Let's see the next one.
179
179
00:09:40,580 --> 00:09:43,103
And again, it worked just fine.
180
180
00:09:44,057 --> 00:09:46,770
And the last one as well.
181
181
00:09:46,770 --> 00:09:48,810
Let's try again, this one here,
182
182
00:09:48,810 --> 00:09:50,510
and for some reason,
183
183
00:09:50,510 --> 00:09:52,360
it's already there.
184
184
00:09:52,360 --> 00:09:56,320
And I guess the reason for that is this first entry
185
185
00:09:56,320 --> 00:09:59,093
here that always gets printed in the beginning.
186
186
00:10:00,060 --> 00:10:02,960
So yeah, you see that the target here is actually
187
187
00:10:02,960 --> 00:10:04,530
this first section.
188
188
00:10:04,530 --> 00:10:06,580
Now it is not intersecting.
189
189
00:10:06,580 --> 00:10:09,890
And so let's now use that to our advantage.
190
190
00:10:09,890 --> 00:10:13,180
So we only want to trigger this removing here,
191
191
00:10:13,180 --> 00:10:14,720
when the section,
192
192
00:10:14,720 --> 00:10:17,403
so when the target is actually intersecting.
193
193
00:10:18,530 --> 00:10:22,970
So if entry.isIntersecting, then do this.
194
194
00:10:27,030 --> 00:10:30,410
And actually, I'm gonna use another guard clause here.
195
195
00:10:30,410 --> 00:10:31,970
So I will do the opposite.
196
196
00:10:31,970 --> 00:10:34,423
So I say, if it's not intersecting,
197
197
00:10:35,420 --> 00:10:37,163
then return right away.
198
198
00:10:38,380 --> 00:10:40,930
Okay, but if it is intersecting,
199
199
00:10:40,930 --> 00:10:42,830
then the function will not return,
200
200
00:10:42,830 --> 00:10:46,223
and simply the rest of our code is gonna be executed.
201
201
00:10:47,330 --> 00:10:49,136
So let's try that one more time,
202
202
00:10:49,136 --> 00:10:51,700
and now you see it's not yet visible,
203
203
00:10:51,700 --> 00:10:53,423
but it will become visible soon.
204
204
00:10:54,720 --> 00:10:55,763
And there it is.
205
205
00:10:58,410 --> 00:11:00,733
Beautiful, and it still works.
206
206
00:11:04,210 --> 00:11:05,043
Now, right.
207
207
00:11:06,170 --> 00:11:08,823
So that's a really nice effect, right?
208
208
00:11:09,660 --> 00:11:12,320
We can just do one more small improvement,
209
209
00:11:12,320 --> 00:11:15,930
which is to now unobserve these sections,
210
210
00:11:15,930 --> 00:11:17,933
because you see, as we keep scrolling,
211
211
00:11:19,000 --> 00:11:21,880
the observer keeps observing the sections.
212
212
00:11:21,880 --> 00:11:24,210
So you see, as we keep scrolling here,
213
213
00:11:24,210 --> 00:11:27,200
more and more of these events,
214
214
00:11:27,200 --> 00:11:28,640
keep getting added.
215
215
00:11:28,640 --> 00:11:31,940
But in fact, they are actually no longer necessary,
216
216
00:11:31,940 --> 00:11:34,200
because we already did all the work
217
217
00:11:34,200 --> 00:11:35,639
that we wanted.
218
218
00:11:35,639 --> 00:11:38,330
And so we can now unobserve.
219
219
00:11:38,330 --> 00:11:43,330
And so there is again by doing observer, dot unobserve,
220
220
00:11:44,930 --> 00:11:46,917
so the opposite of observe.
221
221
00:11:46,917 --> 00:11:50,090
And then again, we need to pass in which element
222
222
00:11:50,090 --> 00:11:51,920
should be unobserved.
223
223
00:11:51,920 --> 00:11:53,400
And so in this case,
224
224
00:11:53,400 --> 00:11:57,023
that comes from entry dot target.
225
225
00:11:58,610 --> 00:12:00,223
So let's see what happens now.
226
226
00:12:01,190 --> 00:12:05,390
So the first time, of course, we get these logs here,
227
227
00:12:05,390 --> 00:12:07,720
because of course, work is being done,
228
228
00:12:07,720 --> 00:12:10,110
but right after that, each of the section
229
229
00:12:10,110 --> 00:12:12,240
is being unobserved.
230
230
00:12:12,240 --> 00:12:13,933
So let's go to the end here.
231
231
00:12:14,830 --> 00:12:17,810
And when we clear this now and keep scrolling,
232
232
00:12:17,810 --> 00:12:20,760
you see that we get no more events here.
233
233
00:12:20,760 --> 00:12:23,100
And so that means that none of this section
234
234
00:12:23,100 --> 00:12:24,785
is being observed anymore.
235
235
00:12:24,785 --> 00:12:26,930
And so that's gonna be even a little bit
236
236
00:12:26,930 --> 00:12:28,853
better for our performance.
237
237
00:12:30,240 --> 00:12:32,820
Now, right, and that's actually it.
238
238
00:12:32,820 --> 00:12:34,260
So another really cool use
239
239
00:12:34,260 --> 00:12:37,053
case of the intersection observer API.
19824
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.