Curtain reveal effect using CSS

I recently redesigned my site and wanted to add a little fun effect at the bottom of the page (go on scroll down I’ll wait) that looked liked the whole website was sliding up and revealing a secret section under the footer and I wanted to do it without JavaScript.

Pseudo elements and fixed positioning

The effect is actually deceptively simple and doesn’t require a whole lot of CSS, my effect doesn’t require any extra markup thanks to some use of pseudo-elements (:after/:before). This is the CSS taken from the above demo.

body {
     padding-bottom: 600px;
}
body:after {
    content: "";
    height: 1800px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000 url(assets/css-ninja.svg) 50% 0 no-repeat;
    background-size: auto 280px;
    z-index: 1;
}

That’s it to get the section to sit where I want using fixed position at the bottom and setting right and left properties to make the element expand the full width. I re-use my SVG logo that appears in the header and adjust the background-size to make it appear bigger so only the top half of the head appears.

To get the reveal effect All I need to do to my content is make sure it has a higher stacking context than my pseudo-element.

.curtain {
    height: 1200px;
    position: relative;
    z-index: 2;
}

Because my demo has no content I have set a height so you can see the effect happen this wouldn’t be needed if you have content. In the pseudo element I also set a height 600px higher than curtain overlay that’s so I can reveal a total of 600px of content when the user scroll down.

A real world case?

The effect on my site was just for fun but perhaps a more clever way of doing it would be to reveal a get in contact or buy my product upon the user scrolling through why they should use your service/product.

This demo uses the footer as the reveal element so the section element has a bottom margin that is equivalent to the height of the footer and the stacking context of the section and header elements are higher than the footer so it will only be “revealed” when the user scrolls to the bottom of the page.

section {
    margin-bottom: 350px;
    position: relative;
    z-index: 2;
}
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 350px;
    z-index: 1;
}

Browser support

The browser support for this is very good the first demo uses pseudo-elements, multiple backgrounds, svg and gradients so it has IE10+ support (With graceful degradation this could easily work IE8+) and the second demo has support IE7+ with just the HTML5 shiv included but wouldn’t require it if you were using divs.

iOS has some issues with fixed positioning

Who am I kidding iOS5 has a crazy amount of weird edge case issues with fixed positioning that will hopefully be addressed in iOS6. In the case of this demo the below screen shot of an iOS5 you’ll see the stacking context gets confused when the user is scrolling it will also flicker quite a lot and be quite jarring.

Showing the weird stacking issue iOS5 has when elements have a fixed position and the user is scrolling

A simple yet cool looking effect, but avoid on iOS mobile devices for now.

Short URL: http://cssn.in/ja/042

Post filed under: css.

Skip to comment form.

  1. Christophe says:

    Why you didn’t used ‘background-attachment’ ?

  2. Robwha says:

    Nice technique Ryan. The ninja is peering at me from the bottom of the page as I’m writing.

  3. Ryan Seddon says:

    @Christophe –

    Yeah good point but I found with background-attachment had pretty poor support on tablets and smart phones, iOS ignores it and justs defaults to scroll. Android devices position: fixed works nicely but background-attachment doesn’t.

  4. Cool. Techcrunch do this type of thing in their header. Been meaning to look into how it works. Thanks for the tip Ryan

  5. Jay Kay says:

    A small design note. The effect is much more noticeable on the the linked page. On your page it’s such a small window at the bottom that (and no shadow), that when I scroll the page with the mouse scroll button, I have to look carefully to notice.

  6. Hi, thanks for posting this! Working nicely on my laptop!

    One question though, I’m designing a responsive where browsing on tablets/phones is going to be common. I want something like this for my footer. Now in 2013, should I go for this, or one of the javascript/jquery options?

    Maybe I should just use this option and do a different footer for phones with no tricks? I need to do a custom drop-down menu for phones anyway…

  7. Ryan Seddon says:

    Position fixed on phones and tablets is broken so this technique has some weird side effects.

  8. Ranjeet says:

    Thanks for this great article. Actually i m trying this code with my Hybrid mobile app. I m able to show curtain effect but i need this effect when i slide down finger from top of mobile’s screen. By this code starting with curtain effect …

Leave a comment