Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,268 --> 00:00:03,456
Let's create a really great effect
2
2
00:00:03,456 --> 00:00:05,540
using animations on scroll.
3
3
00:00:05,540 --> 00:00:07,947
You will love it and this will make our website
4
4
00:00:07,947 --> 00:00:10,030
look absolutely stunning.
5
5
00:00:11,895 --> 00:00:14,895
And what I'm talking about is this.
6
6
00:00:16,611 --> 00:00:21,194
So these items here have this very cool animation
7
7
00:00:21,194 --> 00:00:25,322
and they fade in as we scroll to their position.
8
8
00:00:25,322 --> 00:00:27,812
And the same thing here with the iPhone
9
9
00:00:27,812 --> 00:00:31,306
which comes down from here and also creates
10
10
00:00:31,306 --> 00:00:32,723
this cool effect.
11
11
00:00:33,648 --> 00:00:37,558
And then here the same thing with the city images
12
12
00:00:37,558 --> 00:00:40,042
and we also have this nice animation here.
13
13
00:00:40,042 --> 00:00:41,205
You saw that.
14
14
00:00:41,205 --> 00:00:44,444
This is to call the attention of the user.
15
15
00:00:44,444 --> 00:00:47,237
So let me now show you how we can do this
16
16
00:00:47,237 --> 00:00:48,904
with jQuery and CSS.
17
17
00:00:51,235 --> 00:00:55,402
So, how are we going to achieve those great animations?
18
18
00:00:56,285 --> 00:00:59,581
Well to start with, there's a very cool
19
19
00:00:59,581 --> 00:01:01,581
CSS animation framework.
20
20
00:01:02,756 --> 00:01:06,923
Because powerful animations can be done just using CSS.
21
21
00:01:07,792 --> 00:01:10,308
And I will show you some of them.
22
22
00:01:10,308 --> 00:01:13,469
So we have a whole lot of different stuff here,
23
23
00:01:13,469 --> 00:01:15,804
and this is like really endless.
24
24
00:01:15,804 --> 00:01:18,518
Let me just show you some of them.
25
25
00:01:18,518 --> 00:01:19,935
Bounce right in.
26
26
00:01:21,667 --> 00:01:23,334
All kinds of stuff.
27
27
00:01:25,948 --> 00:01:29,367
So the one that you saw was this,
28
28
00:01:29,367 --> 00:01:32,617
the pulse, then we saw the bounceInUp,
29
29
00:01:36,764 --> 00:01:38,681
and we saw the fadeIn.
30
30
00:01:39,709 --> 00:01:42,647
And those are the ones we are going to use,
31
31
00:01:42,647 --> 00:01:46,039
and we’re going to use jQuery to actually
32
32
00:01:46,039 --> 00:01:48,122
trigger those animations.
33
33
00:01:49,705 --> 00:01:53,538
So we will now use again the waypoint plug-in.
34
34
00:01:55,594 --> 00:01:57,677
So animations on scroll.
35
35
00:02:01,673 --> 00:02:05,006
And in order to do that we need to again
36
36
00:02:05,872 --> 00:02:08,803
here in HTML file set where we want
37
37
00:02:08,803 --> 00:02:11,619
that animation to happen.
38
38
00:02:11,619 --> 00:02:14,952
So if you remember in the first lecture
39
39
00:02:17,174 --> 00:02:20,424
we used the waypoint right here, right?
40
40
00:02:21,615 --> 00:02:23,865
So, here was our waypoint.
41
41
00:02:26,333 --> 00:02:29,577
Now what we want to do is to animate
42
42
00:02:29,577 --> 00:02:32,994
these four columns here basically, right?
43
43
00:02:33,898 --> 00:02:38,326
So as you saw, these columns will have an animation.
44
44
00:02:38,326 --> 00:02:41,326
And in fact, it is this entire row.
45
45
00:02:45,098 --> 00:02:48,431
So we will just say WP for waypoint one.
46
46
00:02:51,344 --> 00:02:54,671
So this row will have our first waypoint
47
47
00:02:54,671 --> 00:02:56,671
and our first animation.
48
48
00:02:59,190 --> 00:03:01,917
All right so let's do that.
49
49
00:03:01,917 --> 00:03:05,250
And just as we did before, we now select
50
50
00:03:07,533 --> 00:03:08,533
waypoint one
51
51
00:03:10,198 --> 00:03:12,281
and then we say waypoint.
52
52
00:03:17,155 --> 00:03:19,304
And again we know the direction,
53
53
00:03:19,304 --> 00:03:23,054
but in this case we will not use it actually,
54
54
00:03:24,125 --> 00:03:27,453
because this animation will only happen once.
55
55
00:03:27,453 --> 00:03:31,761
And how does this animation actually work with CSS?
56
56
00:03:31,761 --> 00:03:33,295
Let me go back here.
57
57
00:03:33,295 --> 00:03:36,004
All you need to do to animate an element
58
58
00:03:36,004 --> 00:03:38,576
using this Animate.CSS framework
59
59
00:03:38,576 --> 00:03:40,809
is to add a Class, AnimateIt,
60
60
00:03:40,809 --> 00:03:44,392
and then the name of the animation we want.
61
61
00:03:45,871 --> 00:03:48,621
For instance, fadeOut or fadeIn,
62
62
00:03:49,732 --> 00:03:52,525
which is the one we want here.
63
63
00:03:52,525 --> 00:03:55,995
So all we need to do, really all we need
64
64
00:03:55,995 --> 00:03:58,495
is to add, know those Classes,
65
65
00:03:59,792 --> 00:04:03,375
to this exact element that we select here.
66
66
00:04:05,527 --> 00:04:08,027
I actually forgot to do that.
67
67
00:04:10,611 --> 00:04:14,511
So, and now it's really easy we just say
68
68
00:04:14,511 --> 00:04:18,990
add Class as we did before, and then the Classes we add
69
69
00:04:18,990 --> 00:04:21,073
are animated and fade in.
70
70
00:04:26,338 --> 00:04:28,005
Really, really easy.
71
71
00:04:30,025 --> 00:04:31,858
Let's check that out.
72
72
00:04:34,959 --> 00:04:36,565
And in order to do that we actually
73
73
00:04:36,565 --> 00:04:39,148
really need to reload the page.
74
74
00:04:40,322 --> 00:04:42,072
So let's close this.
75
75
00:04:45,807 --> 00:04:49,775
Okay we forgot to do one thing here of course,
76
76
00:04:49,775 --> 00:04:52,048
which is this needs to be invisible
77
77
00:04:52,048 --> 00:04:55,157
before we trigger the animation, right?
78
78
00:04:55,157 --> 00:04:58,357
So otherwise it's impossible that this fades in
79
79
00:04:58,357 --> 00:05:01,357
because it is already visible, okay?
80
80
00:05:02,871 --> 00:05:06,710
So back here, we need to change that in the CSS file.
81
81
00:05:06,710 --> 00:05:09,127
And I will do that down here.
82
82
00:05:10,389 --> 00:05:13,389
Let me just grab a copy of this here
83
83
00:05:14,299 --> 00:05:16,882
and say this is for animations.
84
84
00:05:23,397 --> 00:05:27,064
Okay so JS, (mumbles), one.
85
85
00:05:30,979 --> 00:05:35,030
Now there are a couple of ways of doing this,
86
86
00:05:35,030 --> 00:05:39,197
and you maybe remember one of those was display none,
87
87
00:05:40,438 --> 00:05:43,906
which we used to hide the navigation menu before.
88
88
00:05:43,906 --> 00:05:46,301
But that wouldn't work in this case.
89
89
00:05:46,301 --> 00:05:49,968
In this case we have to say opacity is zero.
90
90
00:05:51,472 --> 00:05:53,527
So pretty straightforward.
91
91
00:05:53,527 --> 00:05:58,373
If we set opacity to zero, that element is not visible.
92
92
00:05:58,373 --> 00:06:02,271
And then once the JS waypoint one Class
93
93
00:06:02,271 --> 00:06:04,478
also has the animated Class,
94
94
00:06:04,478 --> 00:06:07,947
then we want the opacity back to one.
95
95
00:06:07,947 --> 00:06:09,553
So how do we do that?
96
96
00:06:09,553 --> 00:06:11,019
And that is actually a new selector
97
97
00:06:11,019 --> 00:06:13,186
that we didn't use so far.
98
98
00:06:14,405 --> 00:06:16,655
It's like the end selector.
99
99
00:06:18,699 --> 00:06:21,616
So what I did before was like this…
100
100
00:06:24,048 --> 00:06:25,898
And then animate it.
101
101
00:06:25,898 --> 00:06:28,516
So this would be animated inside
102
102
00:06:28,516 --> 00:06:31,352
of the JS waypoint one Class.
103
103
00:06:31,352 --> 00:06:33,982
But what I want now is that this Class
104
104
00:06:33,982 --> 00:06:37,323
should have these both Classes at the same time.
105
105
00:06:37,323 --> 00:06:39,990
So this is the selector we use.
106
106
00:06:41,598 --> 00:06:44,447
So that element has a JS waypoint one Class
107
107
00:06:44,447 --> 00:06:47,723
and the animateIt Class at the same time.
108
108
00:06:47,723 --> 00:06:50,806
And then I want opacity back to one.
109
109
00:06:52,011 --> 00:06:55,179
And now of course the most important thing
110
110
00:06:55,179 --> 00:06:58,429
we didn't even do yet is to incorporate
111
111
00:06:59,371 --> 00:07:02,371
this animation CSS framework, right?
112
112
00:07:04,402 --> 00:07:06,402
So let's download that.
113
113
00:07:07,716 --> 00:07:09,133
And here we are.
114
114
00:07:10,398 --> 00:07:14,565
So Omnifood, and it's (mumbles) and it's CSS.
115
115
00:07:17,586 --> 00:07:20,165
So let's put it here.
116
116
00:07:20,165 --> 00:07:23,527
So now I have the animate.CSS file here
117
117
00:07:23,527 --> 00:07:27,444
and let me then incorporate it here, of course.
118
118
00:07:31,023 --> 00:07:33,020
And it could be right here because it's also
119
119
00:07:33,020 --> 00:07:36,437
in the (mumbles) folder.
120
120
00:07:38,670 --> 00:07:40,837
And it's the animate file.
121
121
00:07:41,915 --> 00:07:43,515
Great.
122
122
00:07:43,515 --> 00:07:45,690
And now this will work.
123
123
00:07:45,690 --> 00:07:46,690
Let's see.
124
124
00:07:51,944 --> 00:07:53,694
So we come down here.
125
125
00:07:55,509 --> 00:07:58,635
And okay the animation happens exactly
126
126
00:07:58,635 --> 00:08:01,870
when we hit this part, so the beginning
127
127
00:08:01,870 --> 00:08:05,703
of the waypoint one Class, which is like here.
128
128
00:08:07,413 --> 00:08:11,727
So we of course don't want this to happen this way.
129
129
00:08:11,727 --> 00:08:15,592
We want this to animate when it's like
130
130
00:08:15,592 --> 00:08:17,269
here in this position.
131
131
00:08:17,269 --> 00:08:21,218
So we should set an offset to this code,
132
132
00:08:21,218 --> 00:08:24,551
to this waypoint, such as we did before.
133
133
00:08:26,293 --> 00:08:28,460
And we do this right here.
134
134
00:08:30,411 --> 00:08:31,328
So offset ,
135
135
00:08:33,836 --> 00:08:35,844
let's say 50 percent,
136
136
00:08:35,844 --> 00:08:39,594
because 50 percent would be half of the page.
137
137
00:08:41,155 --> 00:08:44,030
And I think that would be great.
138
138
00:08:44,030 --> 00:08:48,555
And we actually don't want this semicolon here.
139
139
00:08:48,555 --> 00:08:50,222
So let's check this.
140
140
00:08:56,434 --> 00:08:58,263
Here we go.
141
141
00:08:58,263 --> 00:09:02,430
Now it nicely zooms in as we scroll to the element.
142
142
00:09:04,874 --> 00:09:05,707
Very nice.
143
143
00:09:06,738 --> 00:09:08,400
I really like this effect.
144
144
00:09:08,400 --> 00:09:10,769
And now I'm going to do the same thing
145
145
00:09:10,769 --> 00:09:13,527
with this image, and this image should come here
146
146
00:09:13,527 --> 00:09:16,740
from the button all to this place,
147
147
00:09:16,740 --> 00:09:20,849
which creates a nice effect of an image sliding in.
148
148
00:09:20,849 --> 00:09:25,649
And then I will do the fadeIn with these four images
149
149
00:09:25,649 --> 00:09:27,984
so with this whole column.
150
150
00:09:27,984 --> 00:09:31,371
And then I want to grab some attention of the user
151
151
00:09:31,371 --> 00:09:33,668
because there is a cool effect for that
152
152
00:09:33,668 --> 00:09:34,585
here in the
153
153
00:09:36,576 --> 00:09:37,764
in the animate library.
154
154
00:09:37,764 --> 00:09:39,241
It's like this, right?
155
155
00:09:39,241 --> 00:09:40,074
See it?
156
156
00:09:41,310 --> 00:09:43,310
So this is called pulse.
157
157
00:09:44,471 --> 00:09:48,535
And now this should be pretty straightforward.
158
158
00:09:48,535 --> 00:09:51,868
I will just copy this a couple of times.
159
159
00:09:54,225 --> 00:09:56,225
And rename this to three
160
160
00:09:59,241 --> 00:10:00,074
and four.
161
161
00:10:03,421 --> 00:10:04,636
So this is the first one we already did,
162
162
00:10:04,636 --> 00:10:08,830
this will be the second one so the image,
163
163
00:10:08,830 --> 00:10:13,425
these will be the cities, so fade in is just right.
164
164
00:10:13,425 --> 00:10:15,646
And this will then be that pricing plan
165
165
00:10:15,646 --> 00:10:17,063
which will pulse.
166
166
00:10:20,509 --> 00:10:23,259
And the other one is, let me see,
167
167
00:10:25,417 --> 00:10:26,334
bounceInUp.
168
168
00:10:27,717 --> 00:10:30,300
Maybe that's a little too much.
169
169
00:10:31,390 --> 00:10:32,807
I would say fade…
170
170
00:10:36,665 --> 00:10:37,498
fadeInUp.
171
171
00:10:39,248 --> 00:10:41,165
Okay, fadeInUp is cool.
172
172
00:10:42,936 --> 00:10:45,853
So fadeInUp here for number three.
173
173
00:10:48,657 --> 00:10:51,563
That's not correct here for number two.
174
174
00:10:51,563 --> 00:10:54,396
So let's now set those waypoints.
175
175
00:10:56,935 --> 00:10:58,018
So second ...
176
176
00:10:59,834 --> 00:11:00,751
is not here
177
177
00:11:03,921 --> 00:11:06,484
and this image is right here, so I want this
178
178
00:11:06,484 --> 00:11:08,651
to be the JS waypoint two.
179
179
00:11:12,509 --> 00:11:15,435
So the image, now the cities,
180
180
00:11:15,435 --> 00:11:17,988
in fact the entire row such as before,
181
181
00:11:17,988 --> 00:11:21,988
so this is the JavaScript waypoint number three.
182
182
00:11:23,596 --> 00:11:27,763
And then, so where is this pricing plan that I want…
183
183
00:11:29,527 --> 00:11:31,537
It is plan box.
184
184
00:11:31,537 --> 00:11:33,354
Exactly this one.
185
185
00:11:33,354 --> 00:11:36,437
So here I will add JS waypoint two...
186
186
00:11:40,363 --> 00:11:41,196
Four.
187
187
00:11:42,302 --> 00:11:44,445
And now here in the CSS we need to come back
188
188
00:11:44,445 --> 00:11:46,945
down here and do this one here
189
189
00:11:49,161 --> 00:11:53,011
for all the waypoints that will fadeIn.
190
190
00:11:53,011 --> 00:11:55,914
So number one, two and three, because number four
191
191
00:11:55,914 --> 00:11:57,831
does not fadeIn, right?
192
192
00:11:58,717 --> 00:12:02,300
Number four just has those pulsing effect.
193
193
00:12:07,447 --> 00:12:08,864
So two and three.
194
194
00:12:10,970 --> 00:12:13,053
So, let's check this out.
195
195
00:12:19,613 --> 00:12:20,696
Here we are.
196
196
00:12:22,262 --> 00:12:26,198
There comes the second one, very nice.
197
197
00:12:26,198 --> 00:12:28,115
This is also very nice.
198
198
00:12:29,954 --> 00:12:31,420
And this pulsing effect.
199
199
00:12:31,420 --> 00:12:35,925
So all of them work exactly the way we want this.
200
200
00:12:35,925 --> 00:12:37,699
Now there's only one more thing that I want
201
201
00:12:37,699 --> 00:12:39,689
to show you with this.
202
202
00:12:39,689 --> 00:12:41,628
And for instance we saw that this animation
203
203
00:12:41,628 --> 00:12:46,140
was a little bit slow, so we have a way to change that
204
204
00:12:46,140 --> 00:12:48,899
with pure CSS once again.
205
205
00:12:48,899 --> 00:12:52,574
And what I'm talking about is animation,
206
206
00:12:52,574 --> 00:12:54,157
animation duration.
207
207
00:12:55,403 --> 00:12:57,986
Now we’ll set it to one second.
208
208
00:12:59,199 --> 00:13:00,032
All right?
209
209
00:13:01,700 --> 00:13:05,617
And the same thing of course for waypoint four.
210
210
00:13:06,879 --> 00:13:08,046
Waypoint four,
211
211
00:13:10,254 --> 00:13:12,837
animation duration, one second.
212
212
00:13:15,352 --> 00:13:17,685
And I will also prefix this,
213
213
00:13:19,461 --> 00:13:24,050
and you see now we have those WebKit prefixes.
214
214
00:13:24,050 --> 00:13:26,050
So let's try that again.
215
215
00:13:27,160 --> 00:13:31,356
So these animations are a little annoying
216
216
00:13:31,356 --> 00:13:35,523
because we have to re-open the website all the time.
217
217
00:13:37,957 --> 00:13:41,259
So this is faster now as you can see.
218
218
00:13:41,259 --> 00:13:44,934
And this was also a little faster.
219
219
00:13:44,934 --> 00:13:47,184
And I think also this one.
220
220
00:13:48,256 --> 00:13:51,263
So this was triggering animations on scroll.
221
221
00:13:51,263 --> 00:13:53,881
You can do all kinds of effect with this.
222
222
00:13:53,881 --> 00:13:58,175
This was just to show you the basics of animations.
223
223
00:13:58,175 --> 00:13:59,609
You can do all the stuff, and in fact,
224
224
00:13:59,609 --> 00:14:03,192
you can also use this animate.CSS framework
225
225
00:14:04,235 --> 00:14:06,911
completely without jQuery.
226
226
00:14:06,911 --> 00:14:10,411
You can just add those Classes that we add
227
227
00:14:11,474 --> 00:14:13,497
in HTML and then those elements
228
228
00:14:13,497 --> 00:14:15,372
will animate in the beginning.
229
229
00:14:15,372 --> 00:14:17,483
Simple as that.
230
230
00:14:17,483 --> 00:14:20,831
And so we have only one more jQuery lecture left,
231
231
00:14:20,831 --> 00:14:23,020
and so in the next video, we will make our
232
232
00:14:23,020 --> 00:14:25,433
navigation responsive because that's
233
233
00:14:25,433 --> 00:14:28,249
an important part that we left out
234
234
00:14:28,249 --> 00:14:30,848
as we make our website responsive.
235
235
00:14:30,848 --> 00:14:32,348
So, see you there.
19166
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.