Parallax Overlapping Sections Using Sticky Positioning

Published

July 10th 2018

Difficulty

Beginner

Posted by

Rik Lomas

On the Friends With Benefits site, there's a great effect where each section sticks to the top of the page and other sections overlap it in a parallax style. In this tutorial, we talk about how it was achieved.

View demo

Transcript

(bright music)- Hey, Rik from SUPERHi here,and today I'm gonna talk aboutthe Friends with Benefits site and how to makethis kind of layout where if you scrollup and down the page, notice how different layers stickover the top of each other.So it's kind of like a parallax effect,kind of like an overlapping effect, so you can see here.Now how do we even think about making this.Now, it just uses a little bit of CSSto achieve this effect.It's not too complicated.So this video is actually quite short.Now, at the moment, I've got a simple sitethat looks like this,and if I scroll up and down the page,generally what would happen is the normal thing.As I scroll up and down, things stay in place.Now in my HTML, it looks fairly straightforward.I've got my header, I've got a sectionwith the classes about,and then I've got three photo sections,each with different background colors.And in my style sheet, this looksfairly straightforward as well.Just sort of some textiles in here,and I've got all my headers and sectionshaving a padding of 30 pixelsand then down the page, I'm just kind of addingsome background colors and some layout as wellto move these images into the middle.So how do I make these things stick?Now, at the moment, what is happeningis if I scroll down the page,as soon as this layer hits the top, it sticks.And the way that we do this is using the brand-new,well, fairly brand-new, CSS techniquecalled Position Sticky.Now what I want to do is in my HTML,I want all of my layers, my header, my sections,to all stick to the top of the page.Now, in my style sheet, I've already got something set upthat handles both the headers and the sectionson all of this site.And at the moment, it just has padding of 30 pixels.So I wanna add some more to this.What do I need to add?Well, I wanna add this kind of sticky effect,and to use this, I'm gonna use position is sticky.

Now if I do wanna use this on all the browserssuch as IOS, I need to add one more thing in here,which is position webkit sticky,so I need to hyphen webkit, hyphen sticky,just to make this work on all the browsers as well.And one more thing I need to dois tell it where it's sticking to.And in this case, I want them all to stick to the top,so I'm gonna put in top is zero.Now if I look at my preview,and I scroll down the site,notice how they all stick in place,very similarly to what the same techniqueof Friends with Benefits is.So as I scroll down the page, each layer sticksand now, with just three lines of code,all of my layers are sticking in the same way.If you're interested in what Position Sticky can do,I did another tutorial quite recentlywhere I had these effects in placewhere each side sticks in place as you scrollup and down the page.So if you wanna see how this works as well,just using the same technique as Position Stickyin a separate video.(bright music)

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