Voiceover: Let's create a really great effect
using animations on scroll.
You will love it and this will make our website
look absolutely stunning.
And what I'm talking about is this.
So these items here have this very cool animation
and they fade in as we scroll to their position.
And the same thing here with the iPhone
which comes down from here and also creates
this cool effect.
And then here the same thing with the city images
and we also have this nice animation here.
You saw that.
This is to call the attention of the user.
So let me now show you how we can do this
with jQuery and CSS.
So, how are we going to achieve those great animations?
Well to start with, there's a very cool
CSS animation framework.
Because powerful animations can be done just using CSS.
And I will show you some of them.
So we have a whole lot of different stuff here,
and this is like really endless.
Let me just show you some of them.
Bounce right in.
All kinds of stuff.
So the one that you saw was this,
the pulse, then we saw the bounceInUp,
and we saw the fadeIn.
And those are the ones we are going to use,
and we’re going to use jQuery to actually
trigger those animations.
So we will now use again the waypoint plug-in.
So animations on scroll.
And in order to do that we need to again
here in HTML file set where we want
that animation to happen.
So if you remember in the first lecture
we used the waypoint right here, right?
So, here was our waypoint.
Now what we want to do is to animate
these four columns here basically, right?
So as you saw, these columns will have an animation.
And in fact, it is this entire row.
So we will just say WP for waypoint one.
So this row will have our first waypoint
and our first animation.
All right so let's do that.
And just as we did before, we now select
waypoint one
and then we say waypoint.
And again we know the direction,
but in this case we will not use it actually,
because this animation will only happen once.
And how does this animation actually work with CSS?
Let me go back here.
All you need to do to animate an element
using this Animate.CSS framework
is to add a Class, AnimateIt,
and then the name of the animation we want.
For instance, fadeOut or fadeIn,
which is the one we want here.
So all we need to do, really all we need
is to add, know those Classes,
to this exact element that we select here.
I actually forgot to do that.
So, and now it's really easy we just say
add Class as we did before, and then the Classes we add
are animated and fade in.
Really, really easy.
Let's check that out.
And in order to do that we actually
really need to reload the page.
So let's close this.
Okay we forgot to do one thing here of course,
which is this needs to be invisible
before we trigger the animation, right?
So otherwise it's impossible that this fades in
because it is already visible, okay?
So back here, we need to change that in the CSS file.
And I will do that down here.
Let me just grab a copy of this here
and say this is for animations.
Okay so JS, (mumbles), one.
Now there are a couple of ways of doing this,
and you maybe remember one of those was display none,
which we used to hide the navigation menu before.
But that wouldn't work in this case.
In this case we have to say opacity is zero.
So pretty straightforward.
If we set opacity to zero, that element is not visible.
And then once the JS waypoint one Class
also has the animated Class,
then we want the opacity back to one.
So how do we do that?
And that is actually a new selector
that we didn't use so far.
It's like the end selector.
So what I did before was like this…
And then animate it.
So this would be animated inside
of the JS waypoint one Class.
But what I want now is that this Class
should have these both Classes at the same time.
So this is the selector we use.
So that element has a JS waypoint one Class
and the animateIt Class at the same time.
And then I want opacity back to one.
And now of course the most important thing
we didn't even do yet is to incorporate
this animation CSS framework, right?
So let's download that.
And here we are.
So Omnifood, and it's (mumbles) and it's CSS.
So let's put it here.
So now I have the animate.CSS file here
and let me then incorporate it here, of course.
And it could be right here because it's also
in the (mumbles) folder.
And it's the animate file.
Great.
And now this will work.
Let's see.
So we come down here.
And okay the animation happens exactly
when we hit this part, so the beginning
of the waypoint one Class, which is like here.
So we of course don't want this to happen this way.
We want this to animate when it's like
here in this position.
So we should set an offset to this code,
to this waypoint, such as we did before.
And we do this right here.
So offset ,
let's say 50 percent,
because 50 percent would be half of the page.
And I think that would be great.
And we actually don't want this semicolon here.
So let's check this.
Here we go.
Now it nicely zooms in as we scroll to the element.
Very nice.
I really like this effect.
And now I'm going to do the same thing
with this image, and this image should come here
from the button all to this place,
which creates a nice effect of an image sliding in.
And then I will do the fadeIn with these four images
so with this whole column.
And then I want to grab some attention of the user
because there is a cool effect for that
here in the
in the animate library.
It's like this, right?
See it?
So this is called pulse.
And now this should be pretty straightforward.
I will just copy this a couple of times.
And rename this to three
and four.
So this is the first one we already did,
this will be the second one so the image,
these will be the cities, so fade in is just right.
And this will then be that pricing plan
which will pulse.
And the other one is, let me see,
bounceInUp.
Maybe that's a little too much.
I would say fade…
fadeInUp.
Okay, fadeInUp is cool.
So fadeInUp here for number three.
That's not correct here for number two.
So let's now set those waypoints.
So second ...
is not here
and this image is right here, so I want this
to be the JS waypoint two.
So the image, now the cities,
in fact the entire row such as before,
so this is the JavaScript waypoint number three.
And then, so where is this pricing plan that I want…
It is plan box.
Exactly this one.
So here I will add JS waypoint two...
Four.
And now here in the CSS we need to come back
down here and do this one here
for all the waypoints that will fadeIn.
So number one, two and three, because number four
does not fadeIn, right?
Number four just has those pulsing effect.
So two and three.
So, let's check this out.
Here we are.
There comes the second one, very nice.
This is also very nice.
And this pulsing effect.
So all of them work exactly the way we want this.
Now there's only one more thing that I want
to show you with this.
And for instance we saw that this animation
was a little bit slow, so we have a way to change that
with pure CSS once again.
And what I'm talking about is animation,
animation duration.
Now we’ll set it to one second.
All right?
And the same thing of course for waypoint four.
Waypoint four,
animation duration, one second.
And I will also prefix this,
and you see now we have those WebKit prefixes.
So let's try that again.
So these animations are a little annoying
because we have to re-open the website all the time.
So this is faster now as you can see.
And this was also a little faster.
And I think also this one.
So this was triggering animations on scroll.
You can do all kinds of effect with this.
This was just to show you the basics of animations.
You can do all the stuff, and in fact,
you can also use this animate.CSS framework
completely without jQuery.
You can just add those Classes that we add
in HTML and then those elements
will animate in the beginning.
Simple as that.
And so we have only one more jQuery lecture left,
and so in the next video, we will make our
navigation responsive because that's
an important part that we left out
as we make our website responsive.
So, see you there.