1 00:00:01,268 --> 00:00:03,456 Let's create a really great effect 2 00:00:03,456 --> 00:00:05,540 using animations on scroll. 3 00:00:05,540 --> 00:00:07,947 You will love it and this will make our website 4 00:00:07,947 --> 00:00:10,030 look absolutely stunning. 5 00:00:11,895 --> 00:00:14,895 And what I'm talking about is this. 6 00:00:16,611 --> 00:00:21,194 So these items here have this very cool animation 7 00:00:21,194 --> 00:00:25,322 and they fade in as we scroll to their position. 8 00:00:25,322 --> 00:00:27,812 And the same thing here with the iPhone 9 00:00:27,812 --> 00:00:31,306 which comes down from here and also creates 10 00:00:31,306 --> 00:00:32,723 this cool effect. 11 00:00:33,648 --> 00:00:37,558 And then here the same thing with the city images 12 00:00:37,558 --> 00:00:40,042 and we also have this nice animation here. 13 00:00:40,042 --> 00:00:41,205 You saw that. 14 00:00:41,205 --> 00:00:44,444 This is to call the attention of the user. 15 00:00:44,444 --> 00:00:47,237 So let me now show you how we can do this 16 00:00:47,237 --> 00:00:48,904 with jQuery and CSS. 17 00:00:51,235 --> 00:00:55,402 So, how are we going to achieve those great animations? 18 00:00:56,285 --> 00:00:59,581 Well to start with, there's a very cool 19 00:00:59,581 --> 00:01:01,581 CSS animation framework. 20 00:01:02,756 --> 00:01:06,923 Because powerful animations can be done just using CSS. 21 00:01:07,792 --> 00:01:10,308 And I will show you some of them. 22 00:01:10,308 --> 00:01:13,469 So we have a whole lot of different stuff here, 23 00:01:13,469 --> 00:01:15,804 and this is like really endless. 24 00:01:15,804 --> 00:01:18,518 Let me just show you some of them. 25 00:01:18,518 --> 00:01:19,935 Bounce right in. 26 00:01:21,667 --> 00:01:23,334 All kinds of stuff. 27 00:01:25,948 --> 00:01:29,367 So the one that you saw was this, 28 00:01:29,367 --> 00:01:32,617 the pulse, then we saw the bounceInUp, 29 00:01:36,764 --> 00:01:38,681 and we saw the fadeIn. 30 00:01:39,709 --> 00:01:42,647 And those are the ones we are going to use, 31 00:01:42,647 --> 00:01:46,039 and we’re going to use jQuery to actually 32 00:01:46,039 --> 00:01:48,122 trigger those animations. 33 00:01:49,705 --> 00:01:53,538 So we will now use again the waypoint plug-in. 34 00:01:55,594 --> 00:01:57,677 So animations on scroll. 35 00:02:01,673 --> 00:02:05,006 And in order to do that we need to again 36 00:02:05,872 --> 00:02:08,803 here in HTML file set where we want 37 00:02:08,803 --> 00:02:11,619 that animation to happen. 38 00:02:11,619 --> 00:02:14,952 So if you remember in the first lecture 39 00:02:17,174 --> 00:02:20,424 we used the waypoint right here, right? 40 00:02:21,615 --> 00:02:23,865 So, here was our waypoint. 41 00:02:26,333 --> 00:02:29,577 Now what we want to do is to animate 42 00:02:29,577 --> 00:02:32,994 these four columns here basically, right? 43 00:02:33,898 --> 00:02:38,326 So as you saw, these columns will have an animation. 44 00:02:38,326 --> 00:02:41,326 And in fact, it is this entire row. 45 00:02:45,098 --> 00:02:48,431 So we will just say WP for waypoint one. 46 00:02:51,344 --> 00:02:54,671 So this row will have our first waypoint 47 00:02:54,671 --> 00:02:56,671 and our first animation. 48 00:02:59,190 --> 00:03:01,917 All right so let's do that. 49 00:03:01,917 --> 00:03:05,250 And just as we did before, we now select 50 00:03:07,533 --> 00:03:08,533 waypoint one 51 00:03:10,198 --> 00:03:12,281 and then we say waypoint. 52 00:03:17,155 --> 00:03:19,304 And again we know the direction, 53 00:03:19,304 --> 00:03:23,054 but in this case we will not use it actually, 54 00:03:24,125 --> 00:03:27,453 because this animation will only happen once. 55 00:03:27,453 --> 00:03:31,761 And how does this animation actually work with CSS? 56 00:03:31,761 --> 00:03:33,295 Let me go back here. 57 00:03:33,295 --> 00:03:36,004 All you need to do to animate an element 58 00:03:36,004 --> 00:03:38,576 using this Animate.CSS framework 59 00:03:38,576 --> 00:03:40,809 is to add a Class, AnimateIt, 60 00:03:40,809 --> 00:03:44,392 and then the name of the animation we want. 61 00:03:45,871 --> 00:03:48,621 For instance, fadeOut or fadeIn, 62 00:03:49,732 --> 00:03:52,525 which is the one we want here. 63 00:03:52,525 --> 00:03:55,995 So all we need to do, really all we need 64 00:03:55,995 --> 00:03:58,495 is to add, know those Classes, 65 00:03:59,792 --> 00:04:03,375 to this exact element that we select here. 66 00:04:05,527 --> 00:04:08,027 I actually forgot to do that. 67 00:04:10,611 --> 00:04:14,511 So, and now it's really easy we just say 68 00:04:14,511 --> 00:04:18,990 add Class as we did before, and then the Classes we add 69 00:04:18,990 --> 00:04:21,073 are animated and fade in. 70 00:04:26,338 --> 00:04:28,005 Really, really easy. 71 00:04:30,025 --> 00:04:31,858 Let's check that out. 72 00:04:34,959 --> 00:04:36,565 And in order to do that we actually 73 00:04:36,565 --> 00:04:39,148 really need to reload the page. 74 00:04:40,322 --> 00:04:42,072 So let's close this. 75 00:04:45,807 --> 00:04:49,775 Okay we forgot to do one thing here of course, 76 00:04:49,775 --> 00:04:52,048 which is this needs to be invisible 77 00:04:52,048 --> 00:04:55,157 before we trigger the animation, right? 78 00:04:55,157 --> 00:04:58,357 So otherwise it's impossible that this fades in 79 00:04:58,357 --> 00:05:01,357 because it is already visible, okay? 80 00:05:02,871 --> 00:05:06,710 So back here, we need to change that in the CSS file. 81 00:05:06,710 --> 00:05:09,127 And I will do that down here. 82 00:05:10,389 --> 00:05:13,389 Let me just grab a copy of this here 83 00:05:14,299 --> 00:05:16,882 and say this is for animations. 84 00:05:23,397 --> 00:05:27,064 Okay so JS, (mumbles), one. 85 00:05:30,979 --> 00:05:35,030 Now there are a couple of ways of doing this, 86 00:05:35,030 --> 00:05:39,197 and you maybe remember one of those was display none, 87 00:05:40,438 --> 00:05:43,906 which we used to hide the navigation menu before. 88 00:05:43,906 --> 00:05:46,301 But that wouldn't work in this case. 89 00:05:46,301 --> 00:05:49,968 In this case we have to say opacity is zero. 90 00:05:51,472 --> 00:05:53,527 So pretty straightforward. 91 00:05:53,527 --> 00:05:58,373 If we set opacity to zero, that element is not visible. 92 00:05:58,373 --> 00:06:02,271 And then once the JS waypoint one Class 93 00:06:02,271 --> 00:06:04,478 also has the animated Class, 94 00:06:04,478 --> 00:06:07,947 then we want the opacity back to one. 95 00:06:07,947 --> 00:06:09,553 So how do we do that? 96 00:06:09,553 --> 00:06:11,019 And that is actually a new selector 97 00:06:11,019 --> 00:06:13,186 that we didn't use so far. 98 00:06:14,405 --> 00:06:16,655 It's like the end selector. 99 00:06:18,699 --> 00:06:21,616 So what I did before was like this… 100 00:06:24,048 --> 00:06:25,898 And then animate it. 101 00:06:25,898 --> 00:06:28,516 So this would be animated inside 102 00:06:28,516 --> 00:06:31,352 of the JS waypoint one Class. 103 00:06:31,352 --> 00:06:33,982 But what I want now is that this Class 104 00:06:33,982 --> 00:06:37,323 should have these both Classes at the same time. 105 00:06:37,323 --> 00:06:39,990 So this is the selector we use. 106 00:06:41,598 --> 00:06:44,447 So that element has a JS waypoint one Class 107 00:06:44,447 --> 00:06:47,723 and the animateIt Class at the same time. 108 00:06:47,723 --> 00:06:50,806 And then I want opacity back to one. 109 00:06:52,011 --> 00:06:55,179 And now of course the most important thing 110 00:06:55,179 --> 00:06:58,429 we didn't even do yet is to incorporate 111 00:06:59,371 --> 00:07:02,371 this animation CSS framework, right? 112 00:07:04,402 --> 00:07:06,402 So let's download that. 113 00:07:07,716 --> 00:07:09,133 And here we are. 114 00:07:10,398 --> 00:07:14,565 So Omnifood, and it's (mumbles) and it's CSS. 115 00:07:17,586 --> 00:07:20,165 So let's put it here. 116 00:07:20,165 --> 00:07:23,527 So now I have the animate.CSS file here 117 00:07:23,527 --> 00:07:27,444 and let me then incorporate it here, of course. 118 00:07:31,023 --> 00:07:33,020 And it could be right here because it's also 119 00:07:33,020 --> 00:07:36,437 in the (mumbles) folder. 120 00:07:38,670 --> 00:07:40,837 And it's the animate file. 121 00:07:41,915 --> 00:07:43,515 Great. 122 00:07:43,515 --> 00:07:45,690 And now this will work. 123 00:07:45,690 --> 00:07:46,690 Let's see. 124 00:07:51,944 --> 00:07:53,694 So we come down here. 125 00:07:55,509 --> 00:07:58,635 And okay the animation happens exactly 126 00:07:58,635 --> 00:08:01,870 when we hit this part, so the beginning 127 00:08:01,870 --> 00:08:05,703 of the waypoint one Class, which is like here. 128 00:08:07,413 --> 00:08:11,727 So we of course don't want this to happen this way. 129 00:08:11,727 --> 00:08:15,592 We want this to animate when it's like 130 00:08:15,592 --> 00:08:17,269 here in this position. 131 00:08:17,269 --> 00:08:21,218 So we should set an offset to this code, 132 00:08:21,218 --> 00:08:24,551 to this waypoint, such as we did before. 133 00:08:26,293 --> 00:08:28,460 And we do this right here. 134 00:08:30,411 --> 00:08:31,328 So offset , 135 00:08:33,836 --> 00:08:35,844 let's say 50 percent, 136 00:08:35,844 --> 00:08:39,594 because 50 percent would be half of the page. 137 00:08:41,155 --> 00:08:44,030 And I think that would be great. 138 00:08:44,030 --> 00:08:48,555 And we actually don't want this semicolon here. 139 00:08:48,555 --> 00:08:50,222 So let's check this. 140 00:08:56,434 --> 00:08:58,263 Here we go. 141 00:08:58,263 --> 00:09:02,430 Now it nicely zooms in as we scroll to the element. 142 00:09:04,874 --> 00:09:05,707 Very nice. 143 00:09:06,738 --> 00:09:08,400 I really like this effect. 144 00:09:08,400 --> 00:09:10,769 And now I'm going to do the same thing 145 00:09:10,769 --> 00:09:13,527 with this image, and this image should come here 146 00:09:13,527 --> 00:09:16,740 from the button all to this place, 147 00:09:16,740 --> 00:09:20,849 which creates a nice effect of an image sliding in. 148 00:09:20,849 --> 00:09:25,649 And then I will do the fadeIn with these four images 149 00:09:25,649 --> 00:09:27,984 so with this whole column. 150 00:09:27,984 --> 00:09:31,371 And then I want to grab some attention of the user 151 00:09:31,371 --> 00:09:33,668 because there is a cool effect for that 152 00:09:33,668 --> 00:09:34,585 here in the 153 00:09:36,576 --> 00:09:37,764 in the animate library. 154 00:09:37,764 --> 00:09:39,241 It's like this, right? 155 00:09:39,241 --> 00:09:40,074 See it? 156 00:09:41,310 --> 00:09:43,310 So this is called pulse. 157 00:09:44,471 --> 00:09:48,535 And now this should be pretty straightforward. 158 00:09:48,535 --> 00:09:51,868 I will just copy this a couple of times. 159 00:09:54,225 --> 00:09:56,225 And rename this to three 160 00:09:59,241 --> 00:10:00,074 and four. 161 00:10:03,421 --> 00:10:04,636 So this is the first one we already did, 162 00:10:04,636 --> 00:10:08,830 this will be the second one so the image, 163 00:10:08,830 --> 00:10:13,425 these will be the cities, so fade in is just right. 164 00:10:13,425 --> 00:10:15,646 And this will then be that pricing plan 165 00:10:15,646 --> 00:10:17,063 which will pulse. 166 00:10:20,509 --> 00:10:23,259 And the other one is, let me see, 167 00:10:25,417 --> 00:10:26,334 bounceInUp. 168 00:10:27,717 --> 00:10:30,300 Maybe that's a little too much. 169 00:10:31,390 --> 00:10:32,807 I would say fade… 170 00:10:36,665 --> 00:10:37,498 fadeInUp. 171 00:10:39,248 --> 00:10:41,165 Okay, fadeInUp is cool. 172 00:10:42,936 --> 00:10:45,853 So fadeInUp here for number three. 173 00:10:48,657 --> 00:10:51,563 That's not correct here for number two. 174 00:10:51,563 --> 00:10:54,396 So let's now set those waypoints. 175 00:10:56,935 --> 00:10:58,018 So second ... 176 00:10:59,834 --> 00:11:00,751 is not here 177 00:11:03,921 --> 00:11:06,484 and this image is right here, so I want this 178 00:11:06,484 --> 00:11:08,651 to be the JS waypoint two. 179 00:11:12,509 --> 00:11:15,435 So the image, now the cities, 180 00:11:15,435 --> 00:11:17,988 in fact the entire row such as before, 181 00:11:17,988 --> 00:11:21,988 so this is the JavaScript waypoint number three. 182 00:11:23,596 --> 00:11:27,763 And then, so where is this pricing plan that I want… 183 00:11:29,527 --> 00:11:31,537 It is plan box. 184 00:11:31,537 --> 00:11:33,354 Exactly this one. 185 00:11:33,354 --> 00:11:36,437 So here I will add JS waypoint two... 186 00:11:40,363 --> 00:11:41,196 Four. 187 00:11:42,302 --> 00:11:44,445 And now here in the CSS we need to come back 188 00:11:44,445 --> 00:11:46,945 down here and do this one here 189 00:11:49,161 --> 00:11:53,011 for all the waypoints that will fadeIn. 190 00:11:53,011 --> 00:11:55,914 So number one, two and three, because number four 191 00:11:55,914 --> 00:11:57,831 does not fadeIn, right? 192 00:11:58,717 --> 00:12:02,300 Number four just has those pulsing effect. 193 00:12:07,447 --> 00:12:08,864 So two and three. 194 00:12:10,970 --> 00:12:13,053 So, let's check this out. 195 00:12:19,613 --> 00:12:20,696 Here we are. 196 00:12:22,262 --> 00:12:26,198 There comes the second one, very nice. 197 00:12:26,198 --> 00:12:28,115 This is also very nice. 198 00:12:29,954 --> 00:12:31,420 And this pulsing effect. 199 00:12:31,420 --> 00:12:35,925 So all of them work exactly the way we want this. 200 00:12:35,925 --> 00:12:37,699 Now there's only one more thing that I want 201 00:12:37,699 --> 00:12:39,689 to show you with this. 202 00:12:39,689 --> 00:12:41,628 And for instance we saw that this animation 203 00:12:41,628 --> 00:12:46,140 was a little bit slow, so we have a way to change that 204 00:12:46,140 --> 00:12:48,899 with pure CSS once again. 205 00:12:48,899 --> 00:12:52,574 And what I'm talking about is animation, 206 00:12:52,574 --> 00:12:54,157 animation duration. 207 00:12:55,403 --> 00:12:57,986 Now we’ll set it to one second. 208 00:12:59,199 --> 00:13:00,032 All right? 209 00:13:01,700 --> 00:13:05,617 And the same thing of course for waypoint four. 210 00:13:06,879 --> 00:13:08,046 Waypoint four, 211 00:13:10,254 --> 00:13:12,837 animation duration, one second. 212 00:13:15,352 --> 00:13:17,685 And I will also prefix this, 213 00:13:19,461 --> 00:13:24,050 and you see now we have those WebKit prefixes. 214 00:13:24,050 --> 00:13:26,050 So let's try that again. 215 00:13:27,160 --> 00:13:31,356 So these animations are a little annoying 216 00:13:31,356 --> 00:13:35,523 because we have to re-open the website all the time. 217 00:13:37,957 --> 00:13:41,259 So this is faster now as you can see. 218 00:13:41,259 --> 00:13:44,934 And this was also a little faster. 219 00:13:44,934 --> 00:13:47,184 And I think also this one. 220 00:13:48,256 --> 00:13:51,263 So this was triggering animations on scroll. 221 00:13:51,263 --> 00:13:53,881 You can do all kinds of effect with this. 222 00:13:53,881 --> 00:13:58,175 This was just to show you the basics of animations. 223 00:13:58,175 --> 00:13:59,609 You can do all the stuff, and in fact, 224 00:13:59,609 --> 00:14:03,192 you can also use this animate.CSS framework 225 00:14:04,235 --> 00:14:06,911 completely without jQuery. 226 00:14:06,911 --> 00:14:10,411 You can just add those Classes that we add 227 00:14:11,474 --> 00:14:13,497 in HTML and then those elements 228 00:14:13,497 --> 00:14:15,372 will animate in the beginning. 229 00:14:15,372 --> 00:14:17,483 Simple as that. 230 00:14:17,483 --> 00:14:20,831 And so we have only one more jQuery lecture left, 231 00:14:20,831 --> 00:14:23,020 and so in the next video, we will make our 232 00:14:23,020 --> 00:14:25,433 navigation responsive because that's 233 00:14:25,433 --> 00:14:28,249 an important part that we left out 234 00:14:28,249 --> 00:14:30,848 as we make our website responsive. 235 00:14:30,848 --> 00:14:32,348 So, see you there.