Voiceover: Welcome back. 2 2
Let's use some more jQuery. 3 3
In this lecture, 4 4
we'll use it to create some scrolling effects. 5 5
So, there's two things that we need to do. 6 6
First, we need to define 7 7
what happens when he hit these buttons, 8 8
because so far they don't do anything at all. 9 9
And then what happens when we hit 10 10
these navigation buttons right here, right? 11 11
So let's start with the easier ones, which are these two. 12 12
So this is the main call-to-action button 13 13
and so we want this to scroll to the most important section, 14 14
which is the pricing plan section. 15 15
So this will go all the way down 16 16
to this section here 17 17
where a user can then make an action, 18 18
which is signing up for one of these plans. 19 19
And the second one, Show Me More, 20 20
will just scroll down here. 21 21
So we'll start doing that. 22 22
And in jQuery that's actually pretty straightforward. 23 23
Let me just comment my code here 24 24
so that when I come back later I don't get lost with this. 25 25
So this is for 26 26
the sticky navigation. 27 27
And now 28 28
scroll on buttons. 29 29
Alright, and this is actually pretty forward. 30 30
So first up we need to define some classes 31 31
for each of those buttons so that we can then select them. 32 32
And we need a unique class for each of them. 33 33
And as before, 34 34
we want to have a name only for the jQuery. 35 35
So I will call this one 36 36
scroll-to-plan. 37 37
Because this way when we look at this class name, 38 38
we know exactly what should happen. 39 39
Scroll-to-start. 40 40
Okay, great. 41 41
So copy this one. 42 42
And so, maybe you can already guess what happens now. 43 43
So I will select this, 44 44
and then I will say click 45 45
and this defines what happens when we click on that button. 46 46
So function of this is actually always the same. 47 47
So, now this is a little bit strange 48 48
because in order to make the animated scroll, 49 49
we need to select HTML and body. 50 50
And then we use the animate method. 51 51
And like this, 52 52
so scrollTop 53 53
and now we select the section where we would want to go to. 54 54
Again, all of this is maybe a little bit weird. 55 55
You don't have to understand exactly what goes on here, 56 56
just make sure that you understand 57 57
the basic way that we use jQuery. 58 58
So now we need to select the section. 59 59
And the first one is the plans. 60 60
And as before I will 61 61
use a special 62 62
class name, 63 63
section-plans. 64 64
And we can just do the same for 65 65
this one here. 66 66
And we already have it, okay, 67 67
so we don't have to define it here. 68 68
So, let's select that, 69 69
section-plans. 70 70
And then offset 71 71
and top. 72 72
And the other value we need for the animation is the speed. 73 73
And we will say 1,000 milliseconds, which is a second. 74 74
So, again what happens here, we select this class, 75 75
and when we click on it this happens. 76 76
So we have an animation, 77 77
which scrolls to the top of the 78 78
js--section-plans section with a speed of one second. 79 79
Here we go. 80 80
Alright, here we are, 81 81
and this is cool, right? 82 82
So it is a nice effect. 83 83
I'm going to show it to you again. 84 84
Alright, and now let's do the same thing 85 85
for the other one. 86 86
So I'll just duplicate this here. 87 87
Don't want to write it all over again. 88 88
So this is scroll-to-start 89 89
and now this is section-features. 90 90
Hopefully this works as well, and yeah it does. 91 91
So here we are. 92 92
So this was pretty easy. 93 93
Next up, we need to make sure that 94 94
each time we click on one of these links, 95 95
we actually get to the section that we want. 96 96
Now as I told you before, 97 97
we many times use JavaScript plugins 98 98
in order to do some stuff, 99 99
or you can just Google for some jQuery snippets, 100 100
which is like code that someone else writes 101 101
and that you can then use in your website. 102 102
And we will now do that, 103 103
'cause we don't always have to write 104 104
everything from scratch. 105 105
We can use something that someone else used. 106 106
So in this case I found this little script here. 107 107
And we will use that to do exactly what we want 108 108
with that navigation. 109 109
So, Navigation scroll. 110 110
Let me just copy this to this place here. 111 111
And now how do we make this work? 112 112
First, we need to go back to our HTML navigation 113 113
and define some anchors. 114 114
And anchors are like this. 115 115
We write this hash symbol, and then we define a name. 116 116
So food delivery here will be for the features. 117 117
And then we come here and define an ID 118 118
with that exact name. 119 119
And so now this is an anchor 120 120
to this here. 121 121
And this should actually already work, so let's check this. 122 122
Okay, I click here, 123 123
and yeah, it takes me exactly to the place that I want to. 124 124
Fantastic. 125 125
So now let's repeat the same thing for the others as well. 126 126
Because these two of course, not work yet. 127 127
So this one will be works, 128 128
this one will be cities, 129 129
and this one will be plans. 130 130
So this is the meals one and this is the works. 131 131
So ID 132 132
and just works. 133 133
Then the same for cities. 134 134
And now for the plans as well. 135 135
ID, plans. 136 136
And I guess now, all navigation is ready to work. 137 137
So let's start by clicking here, Sign Up. 138 138
And it takes us exactly to the place we want. 139 139
And now Cities, and How It Works, and Food Delivery. 140 140
Okay, fantastic, exactly what we want. 141 141
And so now you see how useful 142 142
it actually is that this navigation bar 143 143
always stays on top of everything, right? 144 144
So this is really quite useful. 145 145
We can just click everywhere we want, 146 146
and it takes us to the exact place. 147 147
So let's just look at this code 148 148
so that we can understand what happens here. 149 149
So basically what this says is to, 150 150
it selects the link element where the href attribute 151 151
starts with an hash symbol. 152 152
Then we click it, 153 153
and this is not too important there, 154 154
basically what happens then 155 155
if that element exists, 156 156
then we scroll to it. 157 157
And this is actually 158 158
the same kind of code we used up here, right. 159 159
So we select the HTML body, we animate it, 160 160
and then we scroll to the top of the section, 161 161
and also in one second. 162 162
We could of course change this, 163 163
make the animations faster or slower, 164 164
but one second is kind of cool. 165 165
So, now we know how to write some code on ourselves. 166 166
We know how to use code from someone else. 167 167
And we even used a small plugin. 168 168
And so in the next section, we will use one more thing, 169 169
and this will be animations on scroll. 170 170
And I'm sure you will like that as well.