Original subtitles

1 1

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.