1
00:00:02,170 --> 00:00:03,680
Now at this point,

2
00:00:03,680 --> 00:00:07,200
we did use a lot of bootstrap,

3
00:00:07,200 --> 00:00:10,170
both its CSS capabilities,

4
00:00:10,170 --> 00:00:15,170
as well as some of its JavaScript driven capabilities.

5
00:00:15,250 --> 00:00:16,490
And therefore,

6
00:00:16,490 --> 00:00:19,920
we already saw examples for both third parties,

7
00:00:19,920 --> 00:00:22,420
CSS and JavaScript packages,

8
00:00:22,420 --> 00:00:25,640
even though it's from the same package, so to say,

9
00:00:25,640 --> 00:00:28,880
but bootstrap simply is a third party package

10
00:00:28,880 --> 00:00:33,880
that basically offers both CSS and JavaScript capabilities.

11
00:00:34,520 --> 00:00:38,190
There also are other packages, for example,

12
00:00:38,190 --> 00:00:43,190
Tailwind CSS, which are only about CSS in the end.

13
00:00:43,880 --> 00:00:46,090
A Tailwind CSS, for example,

14
00:00:46,090 --> 00:00:49,230
gives you a bunch of utility classes.

15
00:00:49,230 --> 00:00:51,470
You see it here in this demo,

16
00:00:51,470 --> 00:00:55,120
which you can put onto your HTML elements

17
00:00:55,120 --> 00:00:57,900
to quickly add certain styles to them

18
00:00:57,900 --> 00:01:02,240
without having to write the full CSS code on your own.

19
00:01:02,240 --> 00:01:05,102
So such packages also exist.

20
00:01:06,330 --> 00:01:10,610
But of course there also are pure JavaScript packages,

21
00:01:10,610 --> 00:01:14,210
which simply add JavaScript driven functionality

22
00:01:14,210 --> 00:01:17,620
to your site and no CSS styling,

23
00:01:17,620 --> 00:01:20,430
no CSS classes that you add.

24
00:01:20,430 --> 00:01:23,570
And I wanna show you an example for this as well.

25
00:01:23,570 --> 00:01:26,210
And for that we're going to add a second page

26
00:01:26,210 --> 00:01:29,760
to this simple demo website here.

27
00:01:29,760 --> 00:01:32,520
I'll add a second HTML file here

28
00:01:32,520 --> 00:01:36,530
and I'll name it, parallax.html

29
00:01:36,530 --> 00:01:41,060
because I wanna show you the so-called parallax effect,

30
00:01:41,060 --> 00:01:44,970
which is a visual effect where some elements scrolls

31
00:01:46,050 --> 00:01:48,480
at a lower speed than the rest of the page,

32
00:01:48,480 --> 00:01:50,050
which is a quite a cool effect,

33
00:01:50,050 --> 00:01:51,700
you'll see it in action soon.

34
00:01:51,700 --> 00:01:53,800
And that is a visual effect,

35
00:01:53,800 --> 00:01:56,060
which even though it's a visual,

36
00:01:56,060 --> 00:02:00,010
is actually achieved by JavaScript changing something

37
00:02:00,010 --> 00:02:02,340
on the page under the hood.

38
00:02:02,340 --> 00:02:07,300
So it requires JavaScript code to implement this effect.

39
00:02:07,300 --> 00:02:11,560
And whilst we could write that code on our own,

40
00:02:11,560 --> 00:02:15,310
it can be quite complex, that code,

41
00:02:15,310 --> 00:02:17,700
especially if you wanna fancy effect.

42
00:02:17,700 --> 00:02:20,170
And hence this is another typical example

43
00:02:20,170 --> 00:02:23,400
where you often use third-party packages

44
00:02:23,400 --> 00:02:25,610
because you don't wanna write all that code

45
00:02:25,610 --> 00:02:29,450
for this standard visual effect on your own.

46
00:02:29,450 --> 00:02:31,890
And that's what we're going to use.

47
00:02:31,890 --> 00:02:36,450
But for this, first of all, in this parallax.html file,

48
00:02:36,450 --> 00:02:39,880
I'll add a brand new skeleton

49
00:02:39,880 --> 00:02:43,030
and replace the title here with Parallax,

50
00:02:43,030 --> 00:02:43,893
like this.

51
00:02:45,240 --> 00:02:49,490
And in there, in the body, I'll add a h1 element

52
00:02:49,490 --> 00:02:54,173
where I just say, The Parallax Effect, just like this.

53
00:02:55,210 --> 00:02:59,420
And then below that, I will add a section.

54
00:02:59,420 --> 00:03:02,370
And in that section, I'll add a image.

55
00:03:02,370 --> 00:03:06,180
And I will simply use one of the images I provided here.

56
00:03:06,180 --> 00:03:08,130
It's up to you which image you wanna use.

57
00:03:08,130 --> 00:03:12,483
I'll simply point at images/tasty.jpg,

58
00:03:13,870 --> 00:03:16,890
and just give it a alt text of Tasty,

59
00:03:16,890 --> 00:03:17,890
something like that.

60
00:03:19,030 --> 00:03:23,000
And then below that, I'll add another section.

61
00:03:23,000 --> 00:03:27,707
Whoops, another section where I say, A Dummy Section

62
00:03:29,190 --> 00:03:32,590
and where I then just wanna add some dummy text.

63
00:03:32,590 --> 00:03:34,340
And for that, I'll add a paragraph

64
00:03:34,340 --> 00:03:37,030
and now I'll use a little utility feature

65
00:03:37,030 --> 00:03:41,880
in visual studio code if you wanna generate some dummy text.

66
00:03:41,880 --> 00:03:44,390
You just type, lorem

67
00:03:44,390 --> 00:03:47,700
and then you also get this auto suggestion overlay

68
00:03:47,700 --> 00:03:51,010
and you can hit TAB to get some dummy text.

69
00:03:51,010 --> 00:03:54,253
And I pressed the Auto-format shortcut to format that.

70
00:03:55,170 --> 00:03:58,610
And then I'll copy this paragraph and paste it in twice,

71
00:03:58,610 --> 00:04:02,280
so that I have a bunch of dummy text here.

72
00:04:02,280 --> 00:04:05,760
And I only add this text here is so that we later

73
00:04:05,760 --> 00:04:09,880
can also scroll on this page because this parallax effect,

74
00:04:09,880 --> 00:04:11,530
which we're going to add,

75
00:04:11,530 --> 00:04:16,529
which will affect this image will only occur

76
00:04:16,640 --> 00:04:20,060
or be visible if we scroll.

77
00:04:20,060 --> 00:04:21,920
But first things first,

78
00:04:21,920 --> 00:04:25,400
before we add any JavaScript code here,

79
00:04:25,400 --> 00:04:30,400
we need some styling for this parallax.html file.

80
00:04:30,760 --> 00:04:31,593
And for this,

81
00:04:31,593 --> 00:04:34,670
I'll actually include that style.css file

82
00:04:34,670 --> 00:04:36,680
with a regular link.

83
00:04:36,680 --> 00:04:40,180
So styles.css, and in here,

84
00:04:40,180 --> 00:04:42,890
I then wanna set up some basic styles,

85
00:04:42,890 --> 00:04:46,570
which I now need to do because in parallax.html,

86
00:04:46,570 --> 00:04:50,480
I'm actually not including bootstrap. I could do that.

87
00:04:50,480 --> 00:04:53,550
We could import bootstrap here just as we're doing it

88
00:04:53,550 --> 00:04:56,720
in the index.html file.

89
00:04:56,720 --> 00:04:59,560
But since this page won't be about bootstrap,

90
00:04:59,560 --> 00:05:01,080
I won't include it.

91
00:05:01,080 --> 00:05:04,980
And instead here, I'll write my own basic styles

92
00:05:04,980 --> 00:05:06,340
and in styles.css,

93
00:05:06,340 --> 00:05:08,100
I'll just make sure that for the body,

94
00:05:08,100 --> 00:05:11,020
I set a font family of sans-serif.

95
00:05:11,020 --> 00:05:14,950
And then for my sections,

96
00:05:14,950 --> 00:05:18,090
which I have here in parallax.html,

97
00:05:18,090 --> 00:05:22,633
For these sections, I also wanna apply a certain styling.

98
00:05:23,610 --> 00:05:28,610
I will apply this styling here to be precise,

99
00:05:28,760 --> 00:05:33,760
from carousel-example without the height though.

100
00:05:34,780 --> 00:05:38,233
But I will apply this width to my sections.

101
00:05:39,140 --> 00:05:41,850
And I wanna make sure that we can go to this page

102
00:05:41,850 --> 00:05:46,190
and therefore on index.html, in this nav bar,

103
00:05:46,190 --> 00:05:48,830
this dummy nav bar, which we have here,

104
00:05:48,830 --> 00:05:50,880
we have this "link" link,

105
00:05:50,880 --> 00:05:55,840
so that anchor element that says, Link and I'll rename this

106
00:05:55,840 --> 00:05:57,080
to Parallax.

107
00:05:57,080 --> 00:06:00,360
And then here, the destination of that link

108
00:06:00,360 --> 00:06:02,863
will be parallax.html.

109
00:06:03,930 --> 00:06:07,210
And with that, if we save all those files,

110
00:06:07,210 --> 00:06:11,053
if we click on parallax, we are taken to that second page.

111
00:06:11,960 --> 00:06:15,580
Now we can't go back, besides the Back button, of course,

112
00:06:15,580 --> 00:06:16,490
but again,

113
00:06:16,490 --> 00:06:19,010
I'm just building this demo page here

114
00:06:19,010 --> 00:06:22,860
to show different aspects of third-party packages.

115
00:06:22,860 --> 00:06:25,620
We're going to build a real project again later

116
00:06:25,620 --> 00:06:26,870
in the course, of course,

117
00:06:28,120 --> 00:06:30,810
but now on this parallax.html file,

118
00:06:30,810 --> 00:06:32,700
I wanna make sure that this image

119
00:06:32,700 --> 00:06:34,440
is also properly styled.

120
00:06:34,440 --> 00:06:37,500
And I wanna make sure that all the text is centered

121
00:06:37,500 --> 00:06:41,220
and therefore back in styles.css,

122
00:06:41,220 --> 00:06:45,223
I will actually add text-align: center here,

123
00:06:46,450 --> 00:06:50,800
and then back in parallax.html,

124
00:06:50,800 --> 00:06:55,800
I'll give this image an id, main-image, for example,

125
00:06:56,590 --> 00:07:01,590
because it is the main image here and in style.css,

126
00:07:01,700 --> 00:07:06,700
I will target that main image and give it a width of 100%,

127
00:07:08,330 --> 00:07:10,990
save all files and reload this page.

128
00:07:10,990 --> 00:07:12,970
And now I got this image here

129
00:07:12,970 --> 00:07:15,670
and I will actually also give it a height of,

130
00:07:15,670 --> 00:07:20,110
let's say, 30rem and then set object-fit to cover,

131
00:07:20,110 --> 00:07:22,470
to make sure the aspect ratio is kept,

132
00:07:22,470 --> 00:07:24,410
and it's simply cropped to fit

133
00:07:24,410 --> 00:07:27,240
into this container, so to say.

134
00:07:27,240 --> 00:07:30,810
Now we got this image and now I want that parallax effect

135
00:07:30,810 --> 00:07:32,250
on that image.

136
00:07:32,250 --> 00:07:34,880
I also want to have this text centered

137
00:07:34,880 --> 00:07:38,650
and for that actually, I'll take text-align: center

138
00:07:38,650 --> 00:07:41,313
and move it from this section to the body.

139
00:07:42,240 --> 00:07:45,860
Because this h1 element here is not inside of a section,

140
00:07:45,860 --> 00:07:47,720
hence it wasn't centered before,

141
00:07:47,720 --> 00:07:50,740
but with text align on the body it will be.

142
00:07:50,740 --> 00:07:52,320
But now back to this image,

143
00:07:52,320 --> 00:07:54,490
I wanna have this parallax effect,

144
00:07:54,490 --> 00:07:58,120
this special scrolling effect on this image.

145
00:07:58,120 --> 00:08:00,550
If we scroll down here,

146
00:08:00,550 --> 00:08:03,040
so if we scroll down to the text down there,

147
00:08:03,040 --> 00:08:06,730
we should see this parallax effect on that image.

148
00:08:06,730 --> 00:08:08,800
And to make that even more visible,

149
00:08:08,800 --> 00:08:11,900
I'll actually go to parallax.html

150
00:08:11,900 --> 00:08:15,620
and copy these free text paragraphs again

151
00:08:15,620 --> 00:08:17,700
and add them again,

152
00:08:17,700 --> 00:08:20,530
so that we have even more text down there,

153
00:08:20,530 --> 00:08:23,960
and we have even more space to scroll.

154
00:08:23,960 --> 00:08:27,963
And now we can finally add this parallax effect here.