Portfolio Pure CSS Scroll Snapping Tutorial

heyo how are you all doing welcome back to another video and welcome back to this tutorial because as i promised i'm going to show you how to create something very fancy but very simple for your personal portfolio websites or just any other websites that you might be designing that's actually very simple to implement but looks quite professional and fancy so that's what we're going to learn today and that thing is called css snap to scroll meaning that when you scroll the page the page will align and snap into place at specific points that you specify so in this case we're going to do a whole page vertically horizontally and then i'll show you that you can actually do it both ways and make your page do something cool but before we get into this tutorial if you do enjoy my tutorials and if you do like my channel make sure you smash that subscribe button to stay in tune with all the content that i release and as always without any further ado let's jump into this tutorial and i'll show you exactly what i have okay so not waste time i've created a main.html file and i created a main.css file now in this case we're going to be using scss or sas just to follow the structure of our html to make it simpler to read so first of all we're going to create a basic html boilerplate now i've got a plugin installed where i can just use the exclamation mark and hit tab and that's going to import everything for me now we need to link our scss file with um with our html so then you'll just provide a link tag with a rel called stylesheet your reference of css folder main.css now we're saying main.css because actually uh the scss has to be uh compiled into css for uh our web browser to understand so uh this is something that is already done in the background and then what we can just do is just give it a title called snap to scroll and that's what we're going to be doing today okay so now let's jump into the body tag and actually create our structure of the web page so currently we have nothing so the first thing that i want to discuss is with this snap to scroll there is certain limitations with browser compatibility meaning that when we say and refer to the body as our main parent it will work in safari but it won't work in chrome in other words to turn this around we would have to specify to the html element for it to work in chrome but not work in safari so a way to combat that and to actually make it work in both is to create a div and we're going to give it a class of container and basically this div is going to span the whole width and height of our body and that's going to be our main wrapper for all the content in our whole web page and this actually at this point avoids the whole problem of browser compatibility when it comes to css snap to scroll now let's create our sections let's create our sections within a container meaning each section is going to be a whole page width and her whole page height that we're going to scroll through so we can just create a section here and inside each section i'm just going to give it a title tag to make sure that we can reference the web page and know which one we're on so we're just going to give it a h1 and say page one now i'm just going to copy this and paste in another two times call this page 2 and call this page free and that's everything for our html it doesn't get more complicated than this it's where the css comes in where the magic starts to happen so we're just going to dive into that and see how cool this is now a few years ago doing css snap to scroll or making the website scroll and snap into place was actually much more complicated because it involved a lot of javascript but in this case it's actually going to be quite simple and i'm going to show you exactly how to do that first of all we can specify our body and we can say that inside this body we want to we want it to span the whole width the whole height so we can say width we want it to be a hundred view port width and we want the height to be a hundred viewport height now um body html has a margin a default margin that gets applied to any web page so we just want to eliminate that eliminate any margins um and there we go now i'm just going to give this a background color so you can actually see that things have changed and then we go on to the web browser and just refresh there you go so we have our whole body that we span the whole width and height and then we have a page one page two and page three which are section tanks that we will have to kind of apply styling to to make them look a little bit better so uh let's jump in and work on the main container so we can refer to the class container and inside this class we want the class to span the whole width and height of body so we'll just say width is a hundred percent and height is 100 percent now what else do we want to do well i want everything inside my container to be the main parent so i want everything to match what everybody is having so in this case i'm going to give it a background color of green and we're just going to see everything being overrided by the green color now we can see this red section here and that's because every single heading tag has a default margin so what we'll do is in just a second i'm just going to take each page heading and we're just going to position everything right in the center so this kind of annoying margin will go away now that everything is kind of overrided by green what we can do is we can work on our sections and this is where kind of the fun will start to happen now i want to position everything in the center and for all of you that always want to know how to position things in the center the best way to do it is just to use flex and make sure that the parent that is going to have our headings which is the section will have a display of flex and we're going to say that this container will justify all the content in the center which is vertical i never can remember if it's vertical or horizontal alignment but align items center and basically that takes care of horizontal and vertical so now if i refresh the page and we go back everything is aligned but why is it at the top well it's because we haven't given each one of our sections a width and a height of 100 to match each page so each section will have a width of 100 viewport viewport width and a height of 100 viewport height here we go so now when we look at it everything is positioned in the center so when i scroll like so everything is in the center now we want to differentiate each one of these pages by giving them a little bit of color and maybe make the text a little bit fancier so we're going to do that now before we actually get into all the fun styling so what we can say is that inside each section i want the colors to be different so what we can do is we can specify with an and and we can refer to the nth and uh of type and i'll say the first child which is going to be the first section i want to give it a a background color of let's say rgb something dark 28 28 28 and then i'm going to give it a color of let's say something nice well let's just go with green let's just keep it simple now i'm going to copy this over another two times now we'll have to change the end type to the second child and to the third child we'll change the color to 38. and the color here to blue and then the background color in our fairy child to 48 48 and the color here to yellow so now what we will see is the colors have changed and we can differentiate between the different sections those colors are really bright and i don't like that now we can get rid of the default red and green borders because we don't need them anymore for our reference and now what we can go ahead and do if i'll just make that bigger is we can work on specifying the h attribute so the h1 tag now i want to give this a font family of uh i don't know ariel might be nice and then i want to give it a font size of like 15 em and here we go we've got page one page two and page three so how do we differentiate and how do we snap to scroll now this is where all of the magic comes in we have a parent container that we reference all the sections to and then we have oral sections so we want to mention that in the parent container we have a scroll snap type now first of all we can specify the direction so i want everything to scroll and snap in the y direction so vertical and i want to say that it's mandatory and i'm going to talk about the different differences in a little bit now we also want to say that the overflow in the direction of y is set to scroll now what will happen here well nothing will happen just yet because what we need to specify is from the parent in the child section so each in each page we want to say that the scroll snap align attribute is set to start meaning that it's going to snap to the very start of each page so now when i scroll there you go and that's where the magic happens three simple lines of css with a lot of styling to just you know differentiate between the pages and it snaps nicely into place now let me talk about some uh differences and some more kind of uh you know different variations of this now instead of mandatory we have something called proximity meaning that rather than snapping the whole page if i keep on scrolling either is going to return or is going to find that proximity point where it will just catch on and then snap into place like so so if you have a bigger page and you don't want it to always snap to the center so you can continue scrolling and then at one point it's going to find that proximity and snap nicely into place so that is the difference between proximity and mandatory now what will happen if we want to scroll through our pages horizontally and that's where the fun comes in so here we just need to change the orientation to x here we need to change the over orientation of overflow to x and now what will happen let's have a look so nothing happens why does nothing happen well the reason nothing happens is because in section we want the sections to be aligned horizontally with each other and a simple way to do that is to say that the parent container which contains all the sections we want to give that a display of flex now display of flex by default is align all the items horizontally so now everything will appear next to each other but now we don't want the flex property to tell us that hey every single page on here should fit into one viewport width and one v port height so actually what we want to do is for a section here we want to give section a flex of none and i will say hey don't shrink the page to make it fit just leave it as it's specified here with the width 100 and height 100 of viewport height and width and here that's exactly what it does so now we can scroll to the side and now we have a horizontally scrolling page how cool is that i mean it's so simple to set up but it's it's so nice and so kind of you know easy to to implement and make your websites you know have a really nice user experience because uh you separate into sections and you can you know jump through those sections quite nicely so now you guys might ask me a question hey philip what happens if i have a fixed navigation from the top or a fixed navigation from the left and i scroll and i want it to work well there is a whole property for that in css so when you refer to that section which is our section that contains our content we can say that we want to apply a scroll margin of in this case left and let's say that our fixed navigation is 100 pixels you can say 100 pixels margin and what you'll see that does is it'll scroll and leave a little bit of space so that's great so that gives space for your margin but now it kind of overflows here but we want it to be a whole page again so what we can do is we can reference to the width of the page and we can give it a little calculation saying i want it to be 100 viewport width minus the size of my navigation which is 100 pixels so now when you scroll you'll see your navigation and then obviously it'll leave that space right there which is quite cool and that's basically everything now i'm not going to code this on the screen but i'll show you and basically what you can do is if you want to create a very fancy page and let's suppose you have many little boxes on the page you can actually have a scroll snap type property of both meaning you can scroll vertically and horizontally and make it snap now obviously we have an overflow here of x you need to get rid of that just to say overflow of x and y let me just get rid of this uh this width not to confuse you guys this is snapping to the to the start we can also make it snap to the center or you can also make it snap to the end so you can specify this as center or you can specify this as end now of course please go ahead and play around with this it's super cool and that's about it for this tutorial i hope you guys enjoyed it if you did make sure you smash the thumbs up button make sure you subscribe to this channel and if you're a fan of my tutorials i'm happy to share my knowledge with you so make sure you look out for the next one but for now guys as always thank you very much for watching and i will see you in the next video bye [Music] you

Channel: Filip

Views: 74,068

Rating: 4.96773 out of 5

Keywords: portfolio tutorial, css snap scroll, snap to scroll, pure css snap scrolling, filip, personal portfolio website tutorial, css tutorial, scroll-snap-type, pure css, pure css snap scroll, css scrolling, css scrolling tutorial, css vertical scroll, css scroll, css horizontal scroll, css vertical scrolling, css custom scrolling, css custom scroll, snap scrolling, snap scroll, web design, web designer, smooth scroll, smooth scrolling, create a personal portfolio, portfolio css

Id: pNPkVQD7vlM

Length: 15min 16sec (916 seconds)

Published: Sat May 29 2021