Original subtitles

1 1

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.