1 00:00:01,438 --> 00:00:02,638 Welcome back. 2 00:00:02,638 --> 00:00:04,798 Let's use some more jQuery. 3 00:00:04,798 --> 00:00:05,858 In this lecture, 4 00:00:05,858 --> 00:00:09,691 we'll use it to create some scrolling effects. 5 00:00:10,838 --> 00:00:13,595 So, there's two things that we need to do. 6 00:00:13,595 --> 00:00:15,394 First, we need to define 7 00:00:15,394 --> 00:00:17,774 what happens when he hit these buttons, 8 00:00:17,774 --> 00:00:20,934 because so far they don't do anything at all. 9 00:00:20,934 --> 00:00:23,194 And then what happens when we hit 10 00:00:23,194 --> 00:00:26,777 these navigation buttons right here, right? 11 00:00:27,914 --> 00:00:32,081 So let's start with the easier ones, which are these two. 12 00:00:33,292 --> 00:00:36,272 So this is the main call-to-action button 13 00:00:36,272 --> 00:00:40,672 and so we want this to scroll to the most important section, 14 00:00:40,672 --> 00:00:43,452 which is the pricing plan section. 15 00:00:43,452 --> 00:00:46,119 So this will go all the way down 16 00:00:47,388 --> 00:00:49,748 to this section here 17 00:00:49,748 --> 00:00:52,848 where a user can then make an action, 18 00:00:52,848 --> 00:00:56,568 which is signing up for one of these plans. 19 00:00:56,568 --> 00:00:58,306 And the second one, Show Me More, 20 00:00:58,306 --> 00:01:00,556 will just scroll down here. 21 00:01:02,346 --> 00:01:04,513 So we'll start doing that. 22 00:01:05,466 --> 00:01:09,633 And in jQuery that's actually pretty straightforward. 23 00:01:10,586 --> 00:01:12,086 Let me just comment my code here 24 00:01:12,086 --> 00:01:16,253 so that when I come back later I don't get lost with this. 25 00:01:17,626 --> 00:01:18,793 So this is for 26 00:01:20,586 --> 00:01:22,419 the sticky navigation. 27 00:01:26,766 --> 00:01:27,599 And now 28 00:01:32,026 --> 00:01:33,526 scroll on buttons. 29 00:01:37,066 --> 00:01:40,446 Alright, and this is actually pretty forward. 30 00:01:40,446 --> 00:01:42,866 So first up we need to define some classes 31 00:01:42,866 --> 00:01:46,881 for each of those buttons so that we can then select them. 32 00:01:46,881 --> 00:01:50,384 And we need a unique class for each of them. 33 00:01:50,384 --> 00:01:51,551 And as before, 34 00:01:52,458 --> 00:01:56,041 we want to have a name only for the jQuery. 35 00:01:57,245 --> 00:01:59,681 So I will call this one 36 00:01:59,681 --> 00:02:00,931 scroll-to-plan. 37 00:02:05,209 --> 00:02:07,821 Because this way when we look at this class name, 38 00:02:07,821 --> 00:02:11,481 we know exactly what should happen. 39 00:02:11,481 --> 00:02:12,814 Scroll-to-start. 40 00:02:17,541 --> 00:02:19,061 Okay, great. 41 00:02:19,061 --> 00:02:20,478 So copy this one. 42 00:02:22,861 --> 00:02:26,201 And so, maybe you can already guess what happens now. 43 00:02:26,201 --> 00:02:28,034 So I will select this, 44 00:02:29,441 --> 00:02:31,424 and then I will say click 45 00:02:31,424 --> 00:02:35,591 and this defines what happens when we click on that button. 46 00:02:37,821 --> 00:02:41,821 So function of this is actually always the same. 47 00:02:44,909 --> 00:02:47,909 So, now this is a little bit strange 48 00:02:49,041 --> 00:02:52,791 because in order to make the animated scroll, 49 00:02:53,756 --> 00:02:56,423 we need to select HTML and body. 50 00:03:02,521 --> 00:03:05,601 And then we use the animate method. 51 00:03:05,601 --> 00:03:06,768 And like this, 52 00:03:07,941 --> 00:03:08,941 so scrollTop 53 00:03:15,781 --> 00:03:20,319 and now we select the section where we would want to go to. 54 00:03:20,319 --> 00:03:23,379 Again, all of this is maybe a little bit weird. 55 00:03:23,379 --> 00:03:26,859 You don't have to understand exactly what goes on here, 56 00:03:26,859 --> 00:03:28,599 just make sure that you understand 57 00:03:28,599 --> 00:03:31,349 the basic way that we use jQuery. 58 00:03:32,376 --> 00:03:35,459 So now we need to select the section. 59 00:03:36,477 --> 00:03:38,657 And the first one is the plans. 60 00:03:38,657 --> 00:03:40,324 And as before I will 61 00:03:42,837 --> 00:03:43,920 use a special 62 00:03:46,137 --> 00:03:47,377 class name, 63 00:03:47,377 --> 00:03:48,544 section-plans. 64 00:03:52,609 --> 00:03:55,192 And we can just do the same for 65 00:03:56,565 --> 00:03:57,732 this one here. 66 00:04:00,167 --> 00:04:01,665 And we already have it, okay, 67 00:04:01,665 --> 00:04:05,085 so we don't have to define it here. 68 00:04:05,085 --> 00:04:06,918 So, let's select that, 69 00:04:08,485 --> 00:04:10,228 section-plans. 70 00:04:10,228 --> 00:04:11,478 And then offset 71 00:04:14,423 --> 00:04:15,256 and top. 72 00:04:17,523 --> 00:04:21,163 And the other value we need for the animation is the speed. 73 00:04:21,163 --> 00:04:25,330 And we will say 1,000 milliseconds, which is a second. 74 00:04:26,823 --> 00:04:31,323 So, again what happens here, we select this class, 75 00:04:31,323 --> 00:04:34,683 and when we click on it this happens. 76 00:04:34,683 --> 00:04:36,703 So we have an animation, 77 00:04:36,703 --> 00:04:39,286 which scrolls to the top of the 78 00:04:41,062 --> 00:04:45,229 js--section-plans section with a speed of one second. 79 00:04:50,065 --> 00:04:51,736 Here we go. 80 00:04:51,736 --> 00:04:54,036 Alright, here we are, 81 00:04:54,036 --> 00:04:56,036 and this is cool, right? 82 00:04:56,896 --> 00:04:58,676 So it is a nice effect. 83 00:04:58,676 --> 00:05:02,256 I'm going to show it to you again. 84 00:05:02,256 --> 00:05:04,416 Alright, and now let's do the same thing 85 00:05:04,416 --> 00:05:05,916 for the other one. 86 00:05:08,396 --> 00:05:10,936 So I'll just duplicate this here. 87 00:05:10,936 --> 00:05:12,776 Don't want to write it all over again. 88 00:05:12,776 --> 00:05:14,943 So this is scroll-to-start 89 00:05:15,976 --> 00:05:18,726 and now this is section-features. 90 00:05:25,676 --> 00:05:27,976 Hopefully this works as well, and yeah it does. 91 00:05:27,976 --> 00:05:29,816 So here we are. 92 00:05:29,816 --> 00:05:31,416 So this was pretty easy. 93 00:05:31,416 --> 00:05:34,336 Next up, we need to make sure that 94 00:05:34,336 --> 00:05:36,316 each time we click on one of these links, 95 00:05:36,316 --> 00:05:40,608 we actually get to the section that we want. 96 00:05:40,608 --> 00:05:43,328 Now as I told you before, 97 00:05:43,328 --> 00:05:46,474 we many times use JavaScript plugins 98 00:05:46,474 --> 00:05:48,294 in order to do some stuff, 99 00:05:48,294 --> 00:05:52,174 or you can just Google for some jQuery snippets, 100 00:05:52,174 --> 00:05:54,574 which is like code that someone else writes 101 00:05:54,574 --> 00:05:58,654 and that you can then use in your website. 102 00:05:58,654 --> 00:06:00,354 And we will now do that, 103 00:06:00,354 --> 00:06:01,974 'cause we don't always have to write 104 00:06:01,974 --> 00:06:04,034 everything from scratch. 105 00:06:04,034 --> 00:06:07,701 We can use something that someone else used. 106 00:06:09,494 --> 00:06:13,494 So in this case I found this little script here. 107 00:06:14,334 --> 00:06:18,814 And we will use that to do exactly what we want 108 00:06:18,814 --> 00:06:20,564 with that navigation. 109 00:06:22,194 --> 00:06:24,027 So, Navigation scroll. 110 00:06:28,414 --> 00:06:31,831 Let me just copy this to this place here. 111 00:06:33,574 --> 00:06:36,324 And now how do we make this work? 112 00:06:37,714 --> 00:06:41,634 First, we need to go back to our HTML navigation 113 00:06:41,634 --> 00:06:44,454 and define some anchors. 114 00:06:44,454 --> 00:06:46,574 And anchors are like this. 115 00:06:46,574 --> 00:06:51,294 We write this hash symbol, and then we define a name. 116 00:06:51,294 --> 00:06:55,211 So food delivery here will be for the features. 117 00:06:57,394 --> 00:07:01,312 And then we come here and define an ID 118 00:07:01,312 --> 00:07:03,062 with that exact name. 119 00:07:04,972 --> 00:07:07,305 And so now this is an anchor 120 00:07:08,228 --> 00:07:09,311 to this here. 121 00:07:10,408 --> 00:07:14,575 And this should actually already work, so let's check this. 122 00:07:17,408 --> 00:07:18,640 Okay, I click here, 123 00:07:18,640 --> 00:07:22,284 and yeah, it takes me exactly to the place that I want to. 124 00:07:22,284 --> 00:07:23,117 Fantastic. 125 00:07:24,484 --> 00:07:28,084 So now let's repeat the same thing for the others as well. 126 00:07:28,084 --> 00:07:31,584 Because these two of course, not work yet. 127 00:07:34,104 --> 00:07:36,424 So this one will be works, 128 00:07:36,424 --> 00:07:38,724 this one will be cities, 129 00:07:38,724 --> 00:07:40,974 and this one will be plans. 130 00:07:46,564 --> 00:07:51,144 So this is the meals one and this is the works. 131 00:07:51,144 --> 00:07:52,678 So ID 132 00:07:52,678 --> 00:07:53,928 and just works. 133 00:07:55,378 --> 00:07:57,461 Then the same for cities. 134 00:07:59,316 --> 00:08:01,816 And now for the plans as well. 135 00:08:03,858 --> 00:08:04,691 ID, plans. 136 00:08:06,718 --> 00:08:10,801 And I guess now, all navigation is ready to work. 137 00:08:12,914 --> 00:08:15,914 So let's start by clicking here, Sign Up. 138 00:08:15,914 --> 00:08:18,994 And it takes us exactly to the place we want. 139 00:08:18,994 --> 00:08:23,914 And now Cities, and How It Works, and Food Delivery. 140 00:08:23,914 --> 00:08:27,081 Okay, fantastic, exactly what we want. 141 00:08:28,114 --> 00:08:30,154 And so now you see how useful 142 00:08:30,154 --> 00:08:32,434 it actually is that this navigation bar 143 00:08:32,434 --> 00:08:35,851 always stays on top of everything, right? 144 00:08:37,274 --> 00:08:39,857 So this is really quite useful. 145 00:08:40,754 --> 00:08:42,874 We can just click everywhere we want, 146 00:08:42,874 --> 00:08:45,791 and it takes us to the exact place. 147 00:08:48,114 --> 00:08:51,074 So let's just look at this code 148 00:08:51,074 --> 00:08:53,874 so that we can understand what happens here. 149 00:08:53,874 --> 00:08:57,354 So basically what this says is to, 150 00:08:57,354 --> 00:09:01,521 it selects the link element where the href attribute 151 00:09:02,434 --> 00:09:04,684 starts with an hash symbol. 152 00:09:06,254 --> 00:09:08,214 Then we click it, 153 00:09:08,214 --> 00:09:10,154 and this is not too important there, 154 00:09:10,154 --> 00:09:12,404 basically what happens then 155 00:09:13,594 --> 00:09:15,511 if that element exists, 156 00:09:16,754 --> 00:09:18,504 then we scroll to it. 157 00:09:20,614 --> 00:09:22,214 And this is actually 158 00:09:22,214 --> 00:09:25,964 the same kind of code we used up here, right. 159 00:09:26,974 --> 00:09:30,294 So we select the HTML body, we animate it, 160 00:09:30,294 --> 00:09:33,314 and then we scroll to the top of the section, 161 00:09:33,314 --> 00:09:35,231 and also in one second. 162 00:09:36,734 --> 00:09:38,272 We could of course change this, 163 00:09:38,272 --> 00:09:40,774 make the animations faster or slower, 164 00:09:40,774 --> 00:09:43,357 but one second is kind of cool. 165 00:09:44,234 --> 00:09:47,974 So, now we know how to write some code on ourselves. 166 00:09:47,974 --> 00:09:51,574 We know how to use code from someone else. 167 00:09:51,574 --> 00:09:54,241 And we even used a small plugin. 168 00:09:55,854 --> 00:09:59,079 And so in the next section, we will use one more thing, 169 00:09:59,079 --> 00:10:02,114 and this will be animations on scroll. 170 00:10:02,114 --> 00:10:05,447 And I'm sure you will like that as well.