1 00:00:02,460 --> 00:00:04,870 Now to add such a parallax effect, 2 00:00:04,870 --> 00:00:06,670 you can Google for parallax 3 00:00:06,670 --> 00:00:11,190 and you'll find a lot of explanations here. 4 00:00:11,190 --> 00:00:13,760 Also, some tutorial articles that 5 00:00:13,760 --> 00:00:17,080 tell you how to create your own parallax effect, 6 00:00:17,080 --> 00:00:21,100 how to build your own parallax effect with JavaScript, 7 00:00:21,100 --> 00:00:25,070 but you will also find third-party packages that help you, 8 00:00:25,070 --> 00:00:28,470 especially if you don't just search for Parallax, 9 00:00:28,470 --> 00:00:30,930 but parallax.js. 10 00:00:30,930 --> 00:00:34,763 So to search for JavaScript packages that help with that, 11 00:00:35,680 --> 00:00:39,480 you'll then find various packages, and again, more examples, 12 00:00:39,480 --> 00:00:43,160 and you should also simpleparallax.com, 13 00:00:43,160 --> 00:00:45,330 which is the package we're now going to use. 14 00:00:45,330 --> 00:00:48,070 It's not the only package, but it's a great package, 15 00:00:48,070 --> 00:00:51,960 very easy to use, and that's why we will use it here. 16 00:00:51,960 --> 00:00:55,340 Now here, you also see a preview, this image here, 17 00:00:55,340 --> 00:00:59,810 this effect, right where this image scrolls internally, 18 00:00:59,810 --> 00:01:02,630 whilst the rest of the page scrolls as well, 19 00:01:02,630 --> 00:01:05,640 that's the parallax effect, which you see here. 20 00:01:05,640 --> 00:01:07,940 We can easily add that effect here 21 00:01:07,940 --> 00:01:11,850 by including this package, this JavaScript package, 22 00:01:11,850 --> 00:01:14,900 which is now a pure JavaScript package, 23 00:01:14,900 --> 00:01:18,603 has nothing to do with CSS into our page. 24 00:01:19,520 --> 00:01:23,570 Again, we get such import link here in the end, 25 00:01:23,570 --> 00:01:24,810 such a script tag, 26 00:01:24,810 --> 00:01:28,630 which points to a JavaScript file that is served by some 27 00:01:28,630 --> 00:01:30,020 other server. 28 00:01:30,020 --> 00:01:30,920 And we can therefore, 29 00:01:30,920 --> 00:01:34,966 simply grab that and hire script element here from that 30 00:01:34,966 --> 00:01:37,570 simpleparallax.com page, 31 00:01:37,570 --> 00:01:40,660 and in Parallax HTML, here, 32 00:01:40,660 --> 00:01:45,660 I'll add it in my head section, and also add this defer 33 00:01:45,860 --> 00:01:49,103 attribute here, which I added before as well. 34 00:01:51,670 --> 00:01:53,670 Now we are including this package, 35 00:01:53,670 --> 00:01:57,320 but now we need to do more than what we did before with 36 00:01:57,320 --> 00:01:58,273 Bootstrap. 37 00:01:59,160 --> 00:02:02,770 With Bootstrap, including the JavaScript package 38 00:02:02,770 --> 00:02:04,500 was all we had to do, 39 00:02:04,500 --> 00:02:07,840 because we use these bootstrap components. 40 00:02:07,840 --> 00:02:12,620 We used the HTML code with certain CSS classes and, 41 00:02:12,620 --> 00:02:17,370 very important, with certain data attributes. 42 00:02:17,370 --> 00:02:20,800 I briefly mentioned this in the last lectures as well. 43 00:02:20,800 --> 00:02:25,270 The Bootstrap JavaScript code, when included in your page, 44 00:02:25,270 --> 00:02:29,500 basically looks for certain CSS classes, 45 00:02:29,500 --> 00:02:32,970 since it knows that these classes are part of Bootstrap, 46 00:02:32,970 --> 00:02:36,730 since the JavaScript code is part of the same package. 47 00:02:36,730 --> 00:02:40,290 and it will look for a certain data-attributes, 48 00:02:40,290 --> 00:02:45,140 since these data-attributes add extra configuration to 49 00:02:45,140 --> 00:02:48,210 your HTML code that will be picked up 50 00:02:48,210 --> 00:02:51,040 by the Bootstrap JavaScript code. 51 00:02:51,040 --> 00:02:52,700 So it automatically looks for that, 52 00:02:52,700 --> 00:02:56,740 and that's why it's working magically behind the scenes; 53 00:02:56,740 --> 00:02:59,440 because you're using all these different tools from the 54 00:02:59,440 --> 00:03:00,913 bootstrap package. 55 00:03:01,970 --> 00:03:06,210 Now with this Parallax JavaScript package, it's different, 56 00:03:06,210 --> 00:03:09,080 I'm including it, but this package, 57 00:03:09,080 --> 00:03:10,970 unlike the bootstrap package, 58 00:03:10,970 --> 00:03:15,590 doesn't tell me that I have to use certain CSS classes or 59 00:03:15,590 --> 00:03:19,610 add certain data dash attributes to certain elements on the 60 00:03:19,610 --> 00:03:21,860 page. Instead to use this package, 61 00:03:21,860 --> 00:03:24,533 we have to write some custom JavaScript code. 62 00:03:25,410 --> 00:03:28,420 We have to select the element, 63 00:03:28,420 --> 00:03:32,460 the image on which we want to apply the parallax effect, 64 00:03:32,460 --> 00:03:35,370 with the tools we learned about in the course already, 65 00:03:35,370 --> 00:03:37,793 for example, Get Element by ID. 66 00:03:38,710 --> 00:03:43,710 And then we have to run this code and pass our selected 67 00:03:43,750 --> 00:03:47,230 object, our Dom object to that code, 68 00:03:47,230 --> 00:03:48,128 to activate this package, 69 00:03:48,128 --> 00:03:51,910 this JavaScript package here. 70 00:03:51,910 --> 00:03:54,560 So to tell it on which element, 71 00:03:54,560 --> 00:03:57,483 it should apply that parallax effect. 72 00:03:58,690 --> 00:04:00,510 And to do that, I'll therefore write 73 00:04:00,510 --> 00:04:03,160 my own JavaScript file here. 74 00:04:03,160 --> 00:04:06,960 The parallax.js file is what I'll add, 75 00:04:06,960 --> 00:04:08,503 the name is up to you though. 76 00:04:09,390 --> 00:04:13,930 And then parallax.html, after including the third-party 77 00:04:13,930 --> 00:04:18,930 package and the order matters because our code will use code 78 00:04:18,950 --> 00:04:20,490 from that package. 79 00:04:20,490 --> 00:04:23,410 So the package code needs to be loaded first, 80 00:04:23,410 --> 00:04:25,830 before our code runs. 81 00:04:25,830 --> 00:04:30,750 So after this link to the simple parallax package, 82 00:04:30,750 --> 00:04:34,690 I'll add another script element and now link to my own code, 83 00:04:34,690 --> 00:04:39,690 in parallax.js and also defer this, so that it also only 84 00:04:40,260 --> 00:04:44,003 executes after the entire other content has been paused. 85 00:04:45,100 --> 00:04:47,950 And now inside of parallax JS, 86 00:04:47,950 --> 00:04:50,780 we can select the element on which we want to apply the 87 00:04:50,780 --> 00:04:55,500 effect, and then use this built in function in the end, 88 00:04:55,500 --> 00:04:58,110 which it is from that parallax package, 89 00:04:58,110 --> 00:05:00,003 to activate that effect. 90 00:05:01,670 --> 00:05:04,150 So for this here in parallax.js, 91 00:05:04,150 --> 00:05:06,630 I'll first of all create a constant, 92 00:05:06,630 --> 00:05:09,750 since I'll never assign a new value to it, 93 00:05:09,750 --> 00:05:13,720 where I want to store this image, basically. 94 00:05:13,720 --> 00:05:16,130 Now this image has the ID main image, 95 00:05:16,130 --> 00:05:18,750 so we can select it by that ID. 96 00:05:18,750 --> 00:05:21,360 And I have my image element here, 97 00:05:21,360 --> 00:05:23,810 which I select by running document.getElementbyID 98 00:05:24,990 --> 00:05:27,003 and passing main image to it. 99 00:05:29,270 --> 00:05:32,850 And now, we just need to do what we see here. 100 00:05:32,850 --> 00:05:37,850 We need to run simpleParallax and pass our element, 101 00:05:38,550 --> 00:05:42,370 in this case our image element to it and, very important, 102 00:05:42,370 --> 00:05:44,633 we need this new keyword. 103 00:05:45,530 --> 00:05:46,363 Now, 104 00:05:46,363 --> 00:05:50,230 if you followed along in that previous course section where 105 00:05:50,230 --> 00:05:52,400 we built a tic-tac-toe game, 106 00:05:52,400 --> 00:05:56,090 you saw that new keyword there as well. 107 00:05:56,090 --> 00:06:00,550 It's basically another way off creating JavaScript objects, 108 00:06:00,550 --> 00:06:03,430 based on certain blueprints. 109 00:06:03,430 --> 00:06:07,150 As simple parallax is a function provided by the parallax 110 00:06:07,150 --> 00:06:11,370 JavaScript package that has a blueprint for a certain kind 111 00:06:11,370 --> 00:06:12,810 of object. 112 00:06:12,810 --> 00:06:17,100 And we create an object based on the blueprint with that new 113 00:06:17,100 --> 00:06:17,970 keyword. 114 00:06:17,970 --> 00:06:20,790 And that blueprint then also wants to know, 115 00:06:20,790 --> 00:06:23,490 which Dom element it should use, 116 00:06:23,490 --> 00:06:25,853 to add the parallax effect too. 117 00:06:26,930 --> 00:06:28,410 We are going to dive deeper, 118 00:06:28,410 --> 00:06:31,760 into the new keyword and JavaScript objects, 119 00:06:31,760 --> 00:06:35,170 and more advanced techniques related to that, 120 00:06:35,170 --> 00:06:36,590 later in the course. 121 00:06:36,590 --> 00:06:37,423 For the moment, 122 00:06:37,423 --> 00:06:40,950 all you need to know is that this will basically activate 123 00:06:40,950 --> 00:06:45,490 this parallax effect on this image with help of that third 124 00:06:45,490 --> 00:06:46,563 party package. 125 00:06:47,440 --> 00:06:49,850 And therefore if you now save this file, 126 00:06:49,850 --> 00:06:52,870 and all the other files are saved as well, 127 00:06:52,870 --> 00:06:55,800 if you go back to your page and you reload, 128 00:06:55,800 --> 00:06:59,710 you see that as I scroll, it might be hard to spot, 129 00:06:59,710 --> 00:07:02,010 but watch the strawberries at the bottom here. 130 00:07:03,117 --> 00:07:04,833 This image has the parallax effect. 131 00:07:05,721 --> 00:07:08,850 We have some scrolling inside of the image besides them 132 00:07:08,850 --> 00:07:11,000 scrolling on the page overall, 133 00:07:11,000 --> 00:07:13,550 and this can create a cool effect, 134 00:07:13,550 --> 00:07:16,053 a very nice effect on your page. 135 00:07:18,690 --> 00:07:21,760 Here of course, it's very subtle, but we can see it. 136 00:07:21,760 --> 00:07:23,653 And we can also configure it. 137 00:07:24,641 --> 00:07:25,900 On the simple parallax page, 138 00:07:25,900 --> 00:07:29,510 we learned that we can configure this parallax effect, 139 00:07:29,510 --> 00:07:32,880 and we can control how it should behave. 140 00:07:32,880 --> 00:07:33,960 But for example, 141 00:07:33,960 --> 00:07:37,720 what should be the direction of this inner scrolling in the 142 00:07:37,720 --> 00:07:38,920 image? 143 00:07:38,920 --> 00:07:39,797 And we can also control when it should start to scroll, 144 00:07:39,797 --> 00:07:43,963 and so on. 145 00:07:44,850 --> 00:07:47,498 To add this configuration, 146 00:07:47,498 --> 00:07:50,150 we just need to pass a second parameter to this simple 147 00:07:50,150 --> 00:07:53,860 parallax function, with a comma and that's a object, 148 00:07:53,860 --> 00:07:57,200 which we just create with these curly braces. 149 00:07:57,200 --> 00:08:00,750 And then there, we can set all these options we see here. 150 00:08:00,750 --> 00:08:01,750 Now, for example, 151 00:08:01,750 --> 00:08:06,090 we could try what happens if we set scale to one dot six, 152 00:08:06,090 --> 00:08:08,490 instead of one dot two, which is the default, 153 00:08:08,490 --> 00:08:09,673 as you can see here. 154 00:08:10,670 --> 00:08:12,510 And we can see what happens, 155 00:08:12,510 --> 00:08:16,010 if we set delay to zero dot one, 156 00:08:16,010 --> 00:08:18,543 instead of zero dot four, which is the default. 157 00:08:19,710 --> 00:08:22,500 If we now save that and we go back here to this page, 158 00:08:22,500 --> 00:08:24,870 and reload, now the effect 159 00:08:24,870 --> 00:08:28,063 is a bit clearer to see, hopefully. 160 00:08:29,010 --> 00:08:31,420 And that is how we could add such a fact, 161 00:08:31,420 --> 00:08:33,010 which is very subtle, 162 00:08:33,010 --> 00:08:35,520 but requires quite a bit of JavaScript code. 163 00:08:35,520 --> 00:08:37,510 And that's another example where 164 00:08:37,510 --> 00:08:39,640 third party packages can help us. 165 00:08:39,640 --> 00:08:42,890 And it's all as an example for a pure JavaScript, 166 00:08:42,890 --> 00:08:44,910 third party package, 167 00:08:44,910 --> 00:08:49,910 where we don't include any additional CSS file for this 168 00:08:50,150 --> 00:08:53,430 package, but just a JavaScript file, 169 00:08:53,430 --> 00:08:56,090 which is hosted on some other server. 170 00:08:56,090 --> 00:08:59,650 And then we activate it with our own JavaScript code, 171 00:08:59,650 --> 00:09:03,720 but this is way less code than we would have to write if we 172 00:09:03,720 --> 00:09:07,050 built this entire effect on our own and more on that in the 173 00:09:07,050 --> 00:09:08,023 next lecture.