Voiceover: Let's create a really great effect 2 2
using animations on scroll. 3 3
You will love it and this will make our website 4 4
look absolutely stunning. 5 5
And what I'm talking about is this. 6 6
So these items here have this very cool animation 7 7
and they fade in as we scroll to their position. 8 8
And the same thing here with the iPhone 9 9
which comes down from here and also creates 10 10
this cool effect. 11 11
And then here the same thing with the city images 12 12
and we also have this nice animation here. 13 13
You saw that. 14 14
This is to call the attention of the user. 15 15
So let me now show you how we can do this 16 16
with jQuery and CSS. 17 17
So, how are we going to achieve those great animations? 18 18
Well to start with, there's a very cool 19 19
CSS animation framework. 20 20
Because powerful animations can be done just using CSS. 21 21
And I will show you some of them. 22 22
So we have a whole lot of different stuff here, 23 23
and this is like really endless. 24 24
Let me just show you some of them. 25 25
Bounce right in. 26 26
All kinds of stuff. 27 27
So the one that you saw was this, 28 28
the pulse, then we saw the bounceInUp, 29 29
and we saw the fadeIn. 30 30
And those are the ones we are going to use, 31 31
and we’re going to use jQuery to actually 32 32
trigger those animations. 33 33
So we will now use again the waypoint plug-in. 34 34
So animations on scroll. 35 35
And in order to do that we need to again 36 36
here in HTML file set where we want 37 37
that animation to happen. 38 38
So if you remember in the first lecture 39 39
we used the waypoint right here, right? 40 40
So, here was our waypoint. 41 41
Now what we want to do is to animate 42 42
these four columns here basically, right? 43 43
So as you saw, these columns will have an animation. 44 44
And in fact, it is this entire row. 45 45
So we will just say WP for waypoint one. 46 46
So this row will have our first waypoint 47 47
and our first animation. 48 48
All right so let's do that. 49 49
And just as we did before, we now select 50 50
waypoint one 51 51
and then we say waypoint. 52 52
And again we know the direction, 53 53
but in this case we will not use it actually, 54 54
because this animation will only happen once. 55 55
And how does this animation actually work with CSS? 56 56
Let me go back here. 57 57
All you need to do to animate an element 58 58
using this Animate.CSS framework 59 59
is to add a Class, AnimateIt, 60 60
and then the name of the animation we want. 61 61
For instance, fadeOut or fadeIn, 62 62
which is the one we want here. 63 63
So all we need to do, really all we need 64 64
is to add, know those Classes, 65 65
to this exact element that we select here. 66 66
I actually forgot to do that. 67 67
So, and now it's really easy we just say 68 68
add Class as we did before, and then the Classes we add 69 69
are animated and fade in. 70 70
Really, really easy. 71 71
Let's check that out. 72 72
And in order to do that we actually 73 73
really need to reload the page. 74 74
So let's close this. 75 75
Okay we forgot to do one thing here of course, 76 76
which is this needs to be invisible 77 77
before we trigger the animation, right? 78 78
So otherwise it's impossible that this fades in 79 79
because it is already visible, okay? 80 80
So back here, we need to change that in the CSS file. 81 81
And I will do that down here. 82 82
Let me just grab a copy of this here 83 83
and say this is for animations. 84 84
Okay so JS, (mumbles), one. 85 85
Now there are a couple of ways of doing this, 86 86
and you maybe remember one of those was display none, 87 87
which we used to hide the navigation menu before. 88 88
But that wouldn't work in this case. 89 89
In this case we have to say opacity is zero. 90 90
So pretty straightforward. 91 91
If we set opacity to zero, that element is not visible. 92 92
And then once the JS waypoint one Class 93 93
also has the animated Class, 94 94
then we want the opacity back to one. 95 95
So how do we do that? 96 96
And that is actually a new selector 97 97
that we didn't use so far. 98 98
It's like the end selector. 99 99
So what I did before was like this… 100 100
And then animate it. 101 101
So this would be animated inside 102 102
of the JS waypoint one Class. 103 103
But what I want now is that this Class 104 104
should have these both Classes at the same time. 105 105
So this is the selector we use. 106 106
So that element has a JS waypoint one Class 107 107
and the animateIt Class at the same time. 108 108
And then I want opacity back to one. 109 109
And now of course the most important thing 110 110
we didn't even do yet is to incorporate 111 111
this animation CSS framework, right? 112 112
So let's download that. 113 113
And here we are. 114 114
So Omnifood, and it's (mumbles) and it's CSS. 115 115
So let's put it here. 116 116
So now I have the animate.CSS file here 117 117
and let me then incorporate it here, of course. 118 118
And it could be right here because it's also 119 119
in the (mumbles) folder. 120 120
And it's the animate file. 121 121
Great. 122 122
And now this will work. 123 123
Let's see. 124 124
So we come down here. 125 125
And okay the animation happens exactly 126 126
when we hit this part, so the beginning 127 127
of the waypoint one Class, which is like here. 128 128
So we of course don't want this to happen this way. 129 129
We want this to animate when it's like 130 130
here in this position. 131 131
So we should set an offset to this code, 132 132
to this waypoint, such as we did before. 133 133
And we do this right here. 134 134
So offset , 135 135
let's say 50 percent, 136 136
because 50 percent would be half of the page. 137 137
And I think that would be great. 138 138
And we actually don't want this semicolon here. 139 139
So let's check this. 140 140
Here we go. 141 141
Now it nicely zooms in as we scroll to the element. 142 142
Very nice. 143 143
I really like this effect. 144 144
And now I'm going to do the same thing 145 145
with this image, and this image should come here 146 146
from the button all to this place, 147 147
which creates a nice effect of an image sliding in. 148 148
And then I will do the fadeIn with these four images 149 149
so with this whole column. 150 150
And then I want to grab some attention of the user 151 151
because there is a cool effect for that 152 152
here in the 153 153
in the animate library. 154 154
It's like this, right? 155 155
See it? 156 156
So this is called pulse. 157 157
And now this should be pretty straightforward. 158 158
I will just copy this a couple of times. 159 159
And rename this to three 160 160
and four. 161 161
So this is the first one we already did, 162 162
this will be the second one so the image, 163 163
these will be the cities, so fade in is just right. 164 164
And this will then be that pricing plan 165 165
which will pulse. 166 166
And the other one is, let me see, 167 167
bounceInUp. 168 168
Maybe that's a little too much. 169 169
I would say fade… 170 170
fadeInUp. 171 171
Okay, fadeInUp is cool. 172 172
So fadeInUp here for number three. 173 173
That's not correct here for number two. 174 174
So let's now set those waypoints. 175 175
So second ... 176 176
is not here 177 177
and this image is right here, so I want this 178 178
to be the JS waypoint two. 179 179
So the image, now the cities, 180 180
in fact the entire row such as before, 181 181
so this is the JavaScript waypoint number three. 182 182
And then, so where is this pricing plan that I want… 183 183
It is plan box. 184 184
Exactly this one. 185 185
So here I will add JS waypoint two... 186 186
Four. 187 187
And now here in the CSS we need to come back 188 188
down here and do this one here 189 189
for all the waypoints that will fadeIn. 190 190
So number one, two and three, because number four 191 191
does not fadeIn, right? 192 192
Number four just has those pulsing effect. 193 193
So two and three. 194 194
So, let's check this out. 195 195
Here we are. 196 196
There comes the second one, very nice. 197 197
This is also very nice. 198 198
And this pulsing effect. 199 199
So all of them work exactly the way we want this. 200 200
Now there's only one more thing that I want 201 201
to show you with this. 202 202
And for instance we saw that this animation 203 203
was a little bit slow, so we have a way to change that 204 204
with pure CSS once again. 205 205
And what I'm talking about is animation, 206 206
animation duration. 207 207
Now we’ll set it to one second. 208 208
All right? 209 209
And the same thing of course for waypoint four. 210 210
Waypoint four, 211 211
animation duration, one second. 212 212
And I will also prefix this, 213 213
and you see now we have those WebKit prefixes. 214 214
So let's try that again. 215 215
So these animations are a little annoying 216 216
because we have to re-open the website all the time. 217 217
So this is faster now as you can see. 218 218
And this was also a little faster. 219 219
And I think also this one. 220 220
So this was triggering animations on scroll. 221 221
You can do all kinds of effect with this. 222 222
This was just to show you the basics of animations. 223 223
You can do all the stuff, and in fact, 224 224
you can also use this animate.CSS framework 225 225
completely without jQuery. 226 226
You can just add those Classes that we add 227 227
in HTML and then those elements 228 228
will animate in the beginning. 229 229
Simple as that. 230 230
And so we have only one more jQuery lecture left, 231 231
and so in the next video, we will make our 232 232
navigation responsive because that's 233 233
an important part that we left out 234 234
as we make our website responsive. 235 235
So, see you there.