We're celebrating a new year and new skills, by offering a 21% discount off all courses and collections at checkout! ✨

How to make a split screen site with sticky sides

Published

May 30th 2018

Difficulty

Beginner

Posted by

Rik Lomas

On the Bao London site, there's a lovely design effect of the screen split in two as you scroll with one side staying in place. Today, we build a whole site from scratch using a similar technique.

View demo

Transcript

(upbeat music)- [Rik] I was asked by a studenthow the Bao site works.Now, the Bao site has this, kind of,sticky split screen that we'll call that,so as you scroll down the site,one side sticks to the screen and the other part scrolls.Now, if you haven't been to Bao,it's one of the best places in London to eat,so definitely go there.I've actually made a simple version of the site.I didn't wanna, kind of, copy Bao,so I've made an ice cream site instead.But as I scroll down the page, one side sticks,and then scroll down, then the other side sticks,and you scroll down to the bottom.Now, I've quickly designed this using a few things.I'm using two fonts from Google Fonts,these two, which I found on the site,and I'm using the Unsplash to actually get the imagery.I'll put some credits at the end.So we're gonna talk about the site in three different ways.First of all, we'll talk about the header,how we put it up here.The second, we'll talk about the sectionsand how we make them stick.And the third is, we'll talk about media queries as well.I've actually set this up as a very basic site,so at the moment, there's currently no content in there.But there is some styles that I've set up already.I've got the Google Font set up already,I've got some typography, and the media queryfor small screens as well.But we're gonna make this from scratch,and we'll talk about every single part along the way.First, the header.(bright electronic music)So my header is basically a kind of cover image,as I kind of scroll up and down,it's how they get bigger and smaller.So how do I do this?Now, I've got this kind of background imageand also a logo that I've made separately,so I've got my cover.jpeg, which looks like that.Again, Unsplash.And a logo, which is an svg.At the moment, in my index.html,I currently don't have anything at all,so how do we add this?Well, I'm just gonna quickly add a header,and then, in the header, an image.Now, which image do I want to add?Well, logo.svg.And I'm just gonna add an all attribute as well,just to give it a name, Battles Ice Cream.There we go.And in my view, all we have now is a logo.So we need to add some style to this.In my style sheet, I'm gonna do thisjust below the p but above the media query.I'll add some room in here.So header, currently, what do we want in there?Well, I kinda wanna have this background image called cover.So I'm gonna add background image URL is cover.jpeg.

So next I wanna see how that looks.So this just takes up the room based on how big the logo is.But I want this to be the full heightof the page, basically.So I'm just gonna add, quickly, a height of 100 vh,so we can see how big it looks.So now what we can see, it's kind ofthe full height of the page.But my background image kind of looks wrong.What I want to do is make this cover the whole thing.Now, as you can see if I kind of size things up,kinda fits into place on my final design.So what I'm gonna add in here is two,or maybe three things, actually.So the first one, I'm gonna keep this again,with my background, background size, is cover.Basically, if it's bigger, we're gonna squeeze it downso it fits in, so now it kinda fits in.But I wanna move this into the center.So if I size this now, what you can kind of see,it's doing it from the top left corner at all times.The crop is in the top left.So we wanna move that crop to the center,so it cuts off the edges in a different way.So now, my background position is gonna befrom the center instead.So let's see how that looks.There we go.That feels a little bit more natural.Now, I want this logo to be in the middle of the page.Now the quick way to do this is using Flexbox.So below here, what I'm gonna do is add in a display flex.

Now with this, because there's only one thing in here,I want it to align in two different ways.Across and down the page.So I'm gonna add in a line items to the center.And I'm gonna justify all of the contentto the center as well.So a line items is if we wrap, and we can,if we have lots of things in a line.But now we can see this is in the middle.Now on my final design, it's actually quite big.It's actually 80% of the height or the width.So to do that on my image in the header,I'm gonna give it a height and width.So header, space, image.Let's give this a width of 80% and a height of 80% as well.

Now because this is an svg, it knows howto scale it correctly.And again, if I scroll it that way.Now if this was a kind of novel image, let's say,a jpeg, instead, it might not know how to do this.So what I'm gonna do is add one extra thing in herecalled the object fit.So this kind of works like background size cover or contain.Now we don't want any crop, we want it to befit in this area, so I'm gonna do contain.So we don't want it to stretch,we don't want the ratio of this,because we don't know what width and height is.For instance, we might have a really small width on this,a height on this, and a really long width.Let's make that image stay consistent.So just adding object fit in therewill make it look more natural.So we've quickly just added the header.Next we'll move on to the sections themselves.How do we make this sticky split scroll effect?(bright electronic music)For the sections, I've got three different areas.So one, two, and then three.So I'm quickly just gonna add to my HTMLthree different sections.So section, and then section, and then one more.

And in each section I've actually got two areas.So I've got one which is the text area,and one we can kind of call full image,let's call that for now, 'cause it's thefull image of the page.So in each section, I'm gonna add the div.

And we'll call this one text, first of all,and a separate one, which is gonna have class of full image,let's call it.Now, we wanna do this on every single section,so I'm gonna copy this in, one in thereand one in there as well.So notice the kind of timeline that I've got here.So section and section line up, and div and div,that kind of goes here and here as well.Those are kind of highlighted.Now, in the full image areas,basically I don't want to put in the same image,so I'm gonna put in image one in hereand image, whoops, image two.And the last one is image three.Now, I do want some text in my text sections,so I'm just quickly gonna snap my fingers.(drums)So I've just quickly put in h two and then four p tags.I've just used Lorem Ipsum, so lipsum.comif you do wanna get some kind of dummy content in here.I can just do four paragraphs in thereand just copy and paste them in.So I've just quickly added that in in each section.So in the div class text is just all in here,and then my div stops there each time.So what we'll get on the page right now is,we have our header, and our typography is already set up.The reason for that is we added it in at the start.Now, how do I actually set this up to look good?Now, the first thing I want to dois split the section into two halves,'cause I've got my div class text and my div full imagethat I want to set up.So to do that, I'm gonna use, again, Flexbox.So below here, for each section,what I want to do is display flex.Now, by default they kind of align in a row.I'll just add this in here as,even though it's the default, I'll just add it injust to kind of explain.And we can see here it looks the same.Now, the reason it looks the sameis because each div in there is kind of sizing itself up,'cause it's flexible.Now, what I want to do is for each div,make it half the size.So in the section, I have two divs,and I want each div to take up a width of 50%.So now, we have half the page,half the page, and half the page.Now, I want this second sectionto actually sit on the right.Now, there's two ways to do this.I could add a class in this, to basically say,switch over if it's this section.But what I could do is say every odd section,so second or third, second and fourth and sixcould be in one way and then the othersare in a different way.I wanna reverse the sections.So I, for this one I'm gonna do section,and nth child, and say odd.So every odd one is gonna have a different flex display,flex direction, sorry.And the way it's gonna do is reverse.So it's gonna do it in the opposite way based on the HTML.So now what I have is our story,then our locations on the opposite side,'cause they're switching over,and then the third way.If we added a fourth section, it'll be in this way.

Now let's add some style to this,let's add some, kind of, look and feel to this.Now, below here, I'm gonna say,section div text, I'm just gonna add some padding,so it's not right at the edge.So there we go, it's just kind ofin the page a little bit more.And what I want to do next is actuallystyle up my full image.So my div full image.Now by default, we're gonna say the height of thisis actually just 100 vh.Which is the height of the current browser.And again, we're just gonna have a background image.And we'll just do the first image, photo one.jpeg in there,so we'll see it for all three.Now again, you can kind of seethis doesn't look too good yet.Let's again use the same thing as we did in the header.So what did we do in the header?Well, up here, we said, background size cover,and we wanna move it into the center.So background size is cover, so it crops in a certain way,and again we want to say background positionis in the center too.

So now, we have the image and the text,the image and the text, and the image and the text.Let's add that variation in there just quickly,so that we'd not using the same image.Section div image two is background image.We wanna change, photo two for that one.Let's overwrite the default, and again,there's the div, image three.Now notice there's a space between them as well.They've a section and the div.

Background image, photo three.

And what we should see now is image one,image two, and image three.Now the only thing that we don't have is that sticky scroll,which is the kind of nice thing that we have on our site.Now how do we even think about this?Well, what we wanna do is stick this to the page.Now, we've done videos in the past,we talk about sticky scroll, and the waythat we're gonna do it on our site is in the,pretty much the same way.Now, we want this div, called full image,to follow us down the page.So I'm gonna add some more style to this.What I'm gonna do is say, position is sticky.Now, this doesn't work for all browsers yet,because it's fairly new, so I'm gonna add in a backup,which is for any webkit browser.We also use sticky.Now, again, webkit browsers are iOS and Safari.Now, this does work in Chrome by defaultif we just have the first line here.But we wanna work it on as many browsers as possible,so we just add in this second line in as well.Now, where do we want it to stick to, though?Well, it's 100 vh.So it's fine where it is.We'll just say top is zero.We don't need the left or right for this,we just need to say top is zero.So just by adding that effect in there,we now tie this to the page.Basically, it's kind of filling in the gap.It's following us down the pagewhere there would usually be a gap.So it's very easy to add this effect in there.It's a very simple effect.Now, just quickly at the end, we'll add insome media queries to make this look good.(bright electronic music)On smaller devices, this doesn't look too good.I've actually just quickly squeezed my site down.And we can see there, again, that doesn't look great.So let's actually just add some media queries in there.We've already got some in there by default.We can see them further down the page,we've got the body and the typography sizes,but what I want to do is add some more in here.So I'm just gonna go in here,so I'm still in my media query,and the first thing we want to do is sort out the header.This is too big, this height is way too big.So instead of it being 100% of the height,what I want it to do is have a ratio on this,which is basically 75% of the width instead.So on the header, I'm just gonna say,well, currently we have this, and I don't want it to be vh,I want it to be dependent on the width of the page,which is now square.Now, I could make this a little bit lower,'cause obviously this is the wide, width,but we talked about the height,so I'm just gonna make this 75 vw,which is kind of a four to three ratio now.Now this kind of feels a little bit more natural.Now, on this area, the sections,I kind of don't need to scroll anymore.Don't need to split two ways,so instead of this being display flex, instead,I'm just gonna say, the section is display block,the default.

And now, we go back to where it was.Now the only issue that we've got is,currently, these two things are 50% width,because we said width is 50%.So we're gonna overwrite that.We're gonna say, section div is width 100%.

So now, if you refresh the page, it's back to normal.Now again, I could remove some of the padding on here,it kind of feels a little bit too much,and again, this is probably a little bit too high,so let's just change those last things.So quickly, I'm just gonna say on the div.txt,padding is way too much, it's currently 60,let's make it 30.And, for the images, let's do the sameas what we did with the header.So section div full image, instead of it beingheight of the browser, let's change the heightfrom being a height to a width,based on the width of the page.So they're squares.So now, as I scroll down the page,just feels a little bit more natural.So now, we've actually made a site that's responsive,but also still has a sticky scroll.There's no Javascript involved in this at all.I've just done this using full CSS.So this, based on this kind of sticky positioningthat we're using, is how we make this sticky split screen.(upbeat music)

Want more? Sign up for our newsletter for more articles, resources, and fresh inspiration