Simple Header and Footer Parallax Effect

I have been working on our Open Mapping site for our open data and open source apps, and I wanted to do a fancy-pants parallax effect on the front page so the content eats the header and reveals the footer as you scroll. This turned out to be some straight-forward CSS and didn’t involve any JavaScript scrolling action.

Let’s take your basic header->content->footer structure inside of a wrapper.

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="wrapper-parallax">
    <header>
        <h1>Header</h1>
    </header>

    <div class="content">
        <h1>Content</h1>
    </div>

    <footer>
        <h1>Footer</h1>
    </footer>
</div>

The first thing you’ll need to do is set the position of the header and footer fixed to the top and bottom respectively with a z-index of -1 to push it below the regular page content. And although I’m sure you are already CSS-normalizing, for the example we will specifically toss the body margin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
    margin: 0;
}
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
    height: 100px;
    background: cyan;
}
footer {
    width: 100%;
    position: fixed;
    z-index: -1;
    bottom: 0;
    background: green;
    height: 60px;
}

Next we’ll give the content a minimum height to avoid having the footer lost in space in our example, a solid background color so it can eat stuff, and a z-index of 1 so it’ll sit on top.

1
2
3
4
5
6
7
8
.content {
    position: relative;
    z-index: 1;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background: white;
    min-height: 500px;
}

Now we set the wrapper margin off the top and bottom the same size as the header and footer.

1
2
3
4
.wrapper-parallax {
    margin-top: 100px;
    margin-bottom: 60px;
}

And that’s it - simple header and footer parallax effect without JavaScript.