Up next in 10
This Simple Trick Makes Your Website 83% Better Looking
531 views
Feb 7, 2024
Discover the key to enhancing your website's visual appeal with this engaging tutorial, "This Simple Trick Makes Your Website 83% Better Looking." In this video, you'll unravel a straightforward and effective technique to elevate the aesthetics of your web pages, making them more visually appealing to visitors. The tutorial unveils a simple design trick that can significantly enhance the overall look and feel of your website, potentially boosting user engagement. Whether you're a web designer seeking quick and impactful improvements or a developer looking to add a touch of elegance, this guide provides valuable insights. Join this tutorial to unlock the secret to making your website 83% better looking effortlessly, and watch as your design choices transform the user experience.
View Video Transcript
0:00
We're going to take this boring static scrolling site and convert it into a parallax scrolling
0:04
site just by using CSS. Welcome back to WebDev Simplified. My name is Kyle, and my job is to simplify the web for you so you can start building a dream
0:16
project sooner. And in this video, we're going to create this awesome parallax scrolling effect, but we're
0:20
going to do it only using CSS because you don't actually need any JavaScript to create this
0:25
So to get started, I just have the images we're using. We have this mountain image and this tree image
0:30
I mean, it doesn't really matter what images you use. These ones just work well enough for our scenario
0:34
And as you can see, the mountain moves much slower in the background. The trees move a little bit quicker, and then the welcome text moves faster
0:40
And to kind of explain what parallax is, is essentially the idea of having elements move at different speeds on the page
0:46
So the things that are closer to you, they're going to be moving faster. So this text moves up and down faster, while things like trees and the mountains that are further away are going to be moving slower
0:54
So you can see the tree, it's scrolling at a different pace than the rest of our page. and the mountains are even scrolling at a different pace than that
1:00
It gives a really 3D effect to your page without really having to do much in the three dimensions
1:05
So in order to create this effect, we're going to obviously need an index HTML file
1:09
So we'll just create a simple index. назадm. And we're also going to create a style sheet
1:14
We'll call it styles. Now to create our boilerplate HTML, we're just going to hit exclamation point and hit enter
1:20
And then inside of the body, we're just kind of a few really simple sections. The first section we're going to have is this header section
1:25
So we're just going to create a div. we're going to give it a class of wrapper. And this wrapper is going to go around all of the content on our page
1:32
This is super important in something I'm going to explain in just a little bit. And the next thing we're going to need is that header that I mentioned
1:38
And then inside of here, we're going to have our images, which are going to have a source of images slash mountain
1:43
And we're going to give it some alt text here. We'll just say background
1:47
It doesn't really matter. Actually, let's just remove the alt. Because in our case, it doesn't really matter what this is
1:51
We're going to give it a class here of background. There we go
1:55
We're also going to have our next image, which is our truble, Trees, oops, make sure I spell trees properly, and this is going to be our foreground
2:01
element, and that's because our background is going to be moving at a slower pace because
2:04
it's further away from the user. Lastly, I want to have an H1 here, which we're just going to give a class of title, and inside
2:11
here I'm just going to put the text welcome. Then outside of our header, I'm going to have another div, and I'm just going to actually
2:17
look at this one, a section here, and the section is going to have some Loram text in it
2:21
We'll just say Loram 300. It's going to give us a bunch of text, and this is just going to allow us to be able to scroll
2:25
our page. Now if we just inspect this, open it with live server. You can see it opens up over here
2:30
We have our mountain, we have our trees, our welcome text, and then all of our text down here at the bottom of our screen
2:34
Now the very first thing I want to do is just make our text a little bit easier to read. So in our styles CSS here I want to select that title and I want to select that section In the section I going to change the font size to 2REM just like that and we say the padding is also going to be 2REM give it a little bit of space
2:51
So when I save, and I make sure that I include this by just putting a link tag in our CSS
2:57
there we go. You can now see our font down here is much larger, has some padding. Also, I'm going to give it a background color of 333, and the color of the text is going to be white
3:07
There we go, just so it has a background. everything and you also notice we have some margins on the outside of our body let's
3:12
remove those by sending body as a margin of zero there we go let's get rid of all of our
3:17
margins now we have our mountains up here trees and then our text the bottom our title we want
3:21
to be pretty large we'll say font size here is going to be 7 r em and our color is
3:26
going to be white and we're going to give it a text shadow so it's a little bit easier to see we'll just give it a zero zero five pixel black text shadow essentially that gives us
3:33
this nice black outline around it that's kind of that shadow we affect so we can see it
3:36
even if it goes over some of our mountains in the dark section or in the sky in the light section
3:41
It's going to be visible no matter what. Now we can actually start styling out our parallax effect
3:45
And I mentioned at the very beginning how this wrapper class is really important. And that's because in order to set up a parallax effects, you need to essentially create a scroll container
3:55
And by default, our body is going to be the thing that's scrolling. Right now, when we scroll our page up and down, our body is the thing that's scrolling
4:01
But we can't actually use our body to create this parallax effect
4:04
we need to have a element inside the body in order to create the parallax effect. So essentially we're creating a wrapper, and we want our wrapper to act just like it's the body
4:12
but it's not the body. That's all this is doing. So in order to emulate that kind of effect, what we need to do is we need to take our wrapper class
4:19
and I want our wrapper to essentially be the height of the screen. So our height is 100 VH
4:23
Now our wrapper here is the exact height of our screen, and that is it. Then the next thing that I want to do is I want to set our overflow in the Y direction
4:31
sorry, the Y direction to auto. That way, if we overflow, it's going to scroll for us
4:36
So right now, when we're scrolling, we're technically scrolling inside of our wrapper
4:39
and not inside the body because the wrapper is 100VH. That means it's the exact height of our screen
4:44
And then our wrapper is just having all the content inside of it, have the scroll. So by writing this simple little code right here, all we've done is we've taken it so that
4:51
when we scroll our page, we're scrolling the wrapper and we're not scrolling the body
4:56
It's kind of weird that we have to do this, but in order to make parallax work, we need to do this
5:00
Then finally, I'm going to take our overflow in the X direction. I'm going to set it to hidden just so we don't have those horizontal scroll bars
5:06
And that right there is essentially all we need to do to set up our wrapper. Now we need to set up our parallax effect
5:12
And to do that, we need to do three-dimensional work in CSS. And in order to have a 3D effect, you need to specify a perspective
5:19
In our case, we're going to use 10 pixels. Now the way a perspective works is essentially it saying hey how big is our Z axis in our measurements We have an X and Y axis so X is horizontal Y is vertical The Z axis is like how far away is something from you
5:34
Like if you're at the screen, if I'm sitting here at my computer, this perspective, say, is I'm 10 pixels away from my screen
5:40
So something that has a, you know, Z position of 10 pixels would be like really close to me
5:45
because it's way pushed out from the screen. And something that has like negative 10 pixels would be really far away from me
5:49
because it's deep inside the screen. We're going to play around with that a little bit. But this perspective value, it actually doesn't matter what it is
5:56
You can make it 10 pixels, you can make it 1 pixel, 100 pixels. It doesn't matter
6:00
It just matters that all the other values you use are relative to this perspective value
6:04
So now let me show you exactly what I'm talking about. We're going to move on to the header here. And this header, I just want to make it so all of our elements are stacked on top of each other
6:12
So we're going to give this a position of relative. We're going to make it a display of flex
6:16
We're going to justify our content in the center and align our items in the center as well
6:20
This is just going to allow us to center our text. I also want to specify that this should be a 100% height
6:26
Essentially, it should take up the full height of our screen. And in order to make sure we do everything in three dimensions
6:31
our transform style here should be preserved 3D. That allows our three-dimensional animations to work properly
6:37
Then we're going to set our Z index to negative 1. And I'll show you why in just a little bit
6:41
but this is really important to make sure that all of our elements show up behind this section down here
6:45
Because if we don't set the Z-index to negative 1, they're actually going to show up over top of our content
6:49
which looks really bad. So now to position everything in the right place, let's select our background
6:55
and we want to select our foreground. And all I want to do for these is I want to position them, absolutely
7:03
and I want to put the height to 100%, the width to 100%
7:06
and then what I want to do is I want to make sure that the object fit is set to cover
7:12
That's just going to make it so that our image actually looks good, and it's going to have the right aspect ratio
7:16
because without this, the image is going to be all scrunched like this. It doesn't look as good. While with cover, it's going to give us the correct aspect ratio, no matter how wide or small our screen is
7:24
So right now, as you can see, our header section just takes up this top portion right here, and that's it
7:28
As we scroll down, it's only in that top portion. We don't have any cool animation effects yet
7:33
You'll also notice that our text is hidden. We could get around that, make our text visible by setting the Z-endex to negative 1 for our background and foreground
7:40
Now you can see our text shows up over top of that, and it looks really good. Now, to create the parallax effect, this is all the code you really need right here
7:47
We're going to take our background element, and we're going to take our foreground. foreground element and we're going to apply some transforms to them
7:52
So we're going to take a transform here and we want to translate in the Z direction. That's going to be making something either closer to us or further away from us on the screen
8:01
By passing a negative value, we're making it further away. So we're going to say that our background is negative 10 pixels away
8:07
And if you remember at the beginning I kind of mentioned how this perspective value doesn matter I could set it to 1 110 it doesn matter And that because everything is relative to it This negative 10 is just exactly the same as my perspective here which is 10
8:18
So now when I save, you can see that this background image looks a lot smaller. And that's because it is very far away from us in relation to our perspective
8:25
Our perspective is 10 pixels, and we're saying this is negative 10 pixels away. So what that's saying is our background is twice as far away from us as the actual screen of our computer is
8:35
So to make our background appear the same size as it was before, we just need to specify a scale of two
8:41
And that's because this image is twice as far away as normal. By putting that scale back to two, now our image is exactly the same size as it was before without that Z index
8:49
But the important thing to note, it is now further away from us, so it's going to scroll at a different speed
8:55
If I scroll down on my page, you notice the mountain right here does not scroll at the same pace as the rest of my page
9:00
And that's because it's further away from me and things that are further away appear to move
9:05
less as you move when you're where you are. So the stuff that's closer to me appears to move more
9:09
quickly than the stuff further away. Now I can do the same thing with our foreground, which we have
9:14
right here. I can take my transform, but instead of making it 10 pixels away, I'm going to make it
9:18
five pixels away. So now as you can see, it's five pixels away. If we get rid of our scale
9:23
it shrunk down quite a bit. So we need to add our scale back in. In our case, our scale is going to be
9:27
1.5. We need to increase the size by 50%, because it's essentially 50% of our perspective away from us
9:34
When I save, you'll notice now, when I save and unsave this, my trees are the exact same size on my screen
9:40
So I haven't actually messed with their sizing. I've just made them appear further away by making them further with the Translate Z
9:46
Now when I scroll, you'll notice that the trees and mountains move at a different speed and my text moves at a different speed
9:51
So everything is moving at a different speed. Now I mentioned that we need that negative one on our Z index for our header
9:57
The reason for that is if I scroll down, you'll notice all the content for our images is showing up over the top of our text
10:02
With this Z-Index here, it means that the content for our images shows up behind, which makes it look a lot better
10:08
Now, really, the important thing to recap here is that we created this wrapper, and this wrapper gave us essentially a scrolling context, and this scrolling context is where we set our perspective on
10:17
We made sure that we set our header inside here to be the same size as our wrapper, and we have our transform style to be preserved 3D
10:23
So we have our scrolling context, that's important. Then we have our transform style here to preserve 3D
10:29
and then we're just translating in the Z direction further away from us the things that we want
10:32
further away and then scaling them back up to their original size so that we can make sure
10:36
that they look like we want them to. And that right there gives you this awesome parallax scrolling effect
10:42
Now if you enjoyed this video, you're going to love my full CSS course. I'm going to have it linked down in the description below
10:46
It teaches you everything you need to know about CSS from the very beginnings to even more advanced
10:50
concepts, so I highly recommend you check that out. With that said, thank you very much for watching and have a good day
#Programming
#Skins
# Themes & Wallpapers
#Software