The Revealing Footer Effect

Published

September 20, 2017

Difficulty

Beginner

Posted by

Lawrence Gosset

Topics

The revealing footer effect is seen on quite a few websites, such as Pitchfork. It's an easy technique to add to your own site using CSS's fixed positioning.

Share this post

Transcript

00:05

[Lawrence] Hello, Lawrence here.What we're gonna learn in this little short videois how to build a revealing footer effect.So, two places where thisyou can kinda see this out in the wild.Firstly, the wonderful SuperHi website.If we scroll down the page, get to the bottom,you see this footer kind of stays fixed in place,but it reveals from underneath, the actual content.

00:32

Another place where it's in use is the Pitchfork website.This is a kind of a music review website.And if we scroll to the bottom here,you can see we've got this thing going on.So this works really well for these kind of big footerswith lots of links and stuff in them.

00:53

So I've put together a little project in SuperHi here,which just has some kind of dummy content.So I combined SuperHi and Pitchfork into SuperFork.It's just got some text,so these are just some paragraphs,a couple of images,and we've got a footer at the bottom here.So this is just a basic content structurejust to demonstrate how this is gonna work.So we're gonna focus purely on the CSS for this,so we don't actually need to write anyreal JavaScript at all.

01:27

So just to show you the HTML,this is the structure that we've gone with.So we have a div, which has a class of page,and then inside of that we have a container div,so this is just making the width of our pagea little bit smaller.Inside of that we've got a header,some paragraphs of text,some image tags,and that's pretty much it.And then, separate from this page element,at the bottom, we have our footer.So this is very important for achieving this effect.You have all of your main content separate from your footer.

02:06

So if you have that in place,I'll leave a little link up with this codeso you can copy it into your own project.Once you have that up,you should hopefully have something like this.What we're going foris basically just content stacking on top of each other,a footer at the bottomthat's perhaps a different color to the rest of the page,and just enough contentso that you actually have a scroll bar here,'cause this is a kind of a scrolling effect.And that's basically what we need.So thinking about this just from the, kind of,initial steps, what we need to have in place is,firstly, to fix this footerso it's always at the bottom of our screen here.

02:50

So if you go into your CSS, scroll right to the bottom.

02:56

I've got some very basic styles in place for various things,mainly just my text,adding sort of margins and space between things,but there's nothing too kind of fancy going on.Scroll right to the bottom.We're gonna add in a new selector.So this is gonna be for our footer,even though we've got one up here,I'm just gonna put it at the bottomso it's kind of separateand a bit clearer for us to step through.So the first thing we wanna do hereis to position our footerso it's fixed on the screen at all times.So how do we do this?We use the position property,and we're gonna give it a value of fixed.So what this is gonna dois take our footer onto its own separate layerthat can be positioned precisely, sort of, on the screen.So where are we gonna position this?Well, we're gonna position it on the bottom of the page,zero, so the bottom edge of our footerwill be on the bottom edge of the page.And we're gonna position it on the left, zero as well.So in addition to that,we are going to make itso it takes up the full width of our screen,so we'll say width, 100%.

04:07

And then we're just gonna leave it at that for the moment.So if you go into your page now,you should hopefully have something like this.So as we scroll,our footer is just staying fixed on the pageat the bottom there,and really our content and our footer,they have no awareness of each other.So these kind of two things are on separate layers.So this footer's being a bit stubborn,it's just sitting itself on top of everything else.So the next thing we wanna do hereis to actually create the spaceat the bottom of our page element,for our footer to sit inside of.So this is me using the developer tools,if you right-click your page in Chrome, go to Inspect,it will bring up a kind of panel like this,basically lets us kinda dig around the codeand see what's going on on our page.So if I highlight this page element here,you can see the blue box there.That's the actual size of the element itself.It's taking up the full height of our screen.

05:13

Whereas we have this footer at the bottom here.So what we really need to do is, on our page element,to create that empty space for our footer to sit inside of.

05:25

So given that our footer's a hundred pixel tools, uh,pixels tall,with our page, what we can say ispadding-bottom, and then 100 pixels.

05:38

So now when we scroll to the bottom of the page,you see this green area.That's empty space that we have created inside of our page,that basically allows us,our footer to kind of sit inside of.So this is a very important thing, as the sort of step.You need to create this empty space inside of yoursort of main content element,that your footer's gonna fit inside of.So that'll involve you doing a bit of measuring,figuring out how tall your footer is,and then adding that as padding onto the bottom like this.

06:11

So I'm gonna go back into my projectJust after this footer selector, I'm gonna put a new one in.I'm gonna say dot page, padding-bottom 100 pixels.

06:27

So this is what we get now.And this isn't much good for us,because our footer isstill sitting on top of everything else.So how can we go about making itso that our content element is sitting on top of our footer?

06:45

Well, in CSS we have the abilityto kind of position things along the Y-axis,so kinda going up and down the page.We can also do it along the X-axis,so positioning things kinda from left to right.But we also have the concept of the Z-axis,so this is the way elements sort of stackon top of each other,so going into the page and coming out of the page.So the analogy that I like to use for,uh, kind of explain the Z-axis is thinking of,like a pile of books on a table,or layers inside of a Photoshop file.It essentially allows us to layer up elements in CSS.So in CSS we have something called z-index,and this property, by default, starts at zero.And basically we can give it a whole numberbetween zero and, just like 9,999,000.

07:44

There's really no kind of limit to it.So if we give our footer a Z-index of one,and we give our page a Z-index of two,what's gonna happen isour page is gonna sit on top of our footer,'cause we've now introduced this order of Z-index.

08:07

So what we need, when we use a Z-index property,is also we need to have a position property.So the position propertythat we're going to use on our page elementis called relative.

08:20

So this allows us to basically move our page elementin relation to itself.We're not actually kinda moving it around at all,we're purely adding this position relativeso that our Z-index property works.By default, things have a position property of static,which doesn't get affected when you use the Z-index.So these two things always go hand-in-hand,if you're gonna be using them.Position fixed, Z-index, position relative, Z-index.And another one we have is absolute position,which is a little bit similar to fixed.So if you have that in, go back into your page,and have a look at what's going on.And now we can see our footer has disappeared,so we'll just investigate that in a sec,but essentially our content hereis sitting on top of the page.

09:15

Sorry, on top of the footer.

09:19

So what we're gonna do here is,rather than putting the padding onto our page,let's add it onto the body tag.

09:37

So what's happening now is, rather than on the page element,adding the padding, we've done it onto the body tag.So the body tag contains both the page and the footer.

09:50

By doing that, we have everything working.So one last thing that you could do, if you wanted,is just to add some padding onto the bottom ofthis page element.So currently, it had a little bit of a spot therewhere it kinda scrolled, but it wasn't revealing the footer.So by adding a bit of paddingonto the bottom of the page element,it's gonna force thatto kinda contain all of the stuff inside.

10:23

So we kinda had some marginsthat were just creating a bit of awkward spaceat the bottom.

10:28

And that's essentially it.So as we scroll, our page is revealing our footer,and these two elements are sitting one on top of the other.So before I run out of battery here,main takeaways from this are thatto create a scrolling reveal effect with your footer,you fix the footer to the bottom of the page,you create the empty space neededby using padding on the bottom of your body element,and you also use the Z-index propertyto put your page element on top of your footer.And that's how it works.

Published

September 20, 2017

Difficulty

Beginner

Posted by

Lawrence Gosset

Topics

More videos

Beginner

23:17

INTERVIEW

Planning, Designing + Coding Your First iOs App with Lou

Beginner

13:53

TUTORIAL

How to Make a Javascript Accordion

Intermediate

17:52

TUTORIAL

How to Add International Times with Timezones to Your Website

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