0

I'm talking about the "curtain reveal" effect that's commonly achieved by having a position fixed or absolute element stay on the bottom with a higher placed (z-index) element above it.

Something like this: http://cssdeck.com/labs/niasr9l8 or https://www.thecssninja.com/demo/css_reveal/

The problem with both of these methods, is that they only allow revealing images. Is it possible to reveal entire fixed position (top:0) HTML when scrolling with pure CSS? Thanks!

also, here is my current attempt in case it helps (I want the different text to stay static while scrolling, but get revealed while scrolling): 

.section {
  height: 100vh;
  color: white;
  overflow: hidden;
}
.section .static-container {
  position: relative;
  top: 0;
  height: 100vh;
  width: 100%;
}
.section:nth-child(1) {
  z-index: 1;
}
.section:nth-child(1) .static-container {
  background-color: green;
}
.section:nth-child(2) {
  z-index: 2;
}
.section:nth-child(2) .static-container {
  background-color: blue;
}
.section:nth-child(3) {
  z-index: 3;
}
.section:nth-child(3) .static-container {
  background-color: red;
}
.section:nth-child(4) {
  z-index: 4;
}
.section:nth-child(4) .static-container {
  background-color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="section">
  <div class="static-container">
    <div class="container">
      <h1>Hello World</h1>
    </div>
  </div>
</section>
<section class="section">
  <div class="static-container">
    <div class="container">
      <h1>Lorem Ipsum</h1>
    </div>
  </div>
</section>
<section class="section">
  <div class="static-container">
    <div class="container">
      <h1>Hello World</h1>
    </div>
  </div>
</section>
<section class="section">
  <div class="static-container">
    <div class="container">
      <h2>Lorem Ipsum</h2>
    </div>
  </div>
</section>
sgarcia.dev
  • 5,671
  • 14
  • 46
  • 80

1 Answers1

1

I think this should work:

    .section {
        height: 100vh;
        color: white;
        overflow: hidden;
    }
    .section .static-container {
        position: relative;
        top: 0;
        height: 100vh;
        width: 100%;
    }
    .section:nth-child(2) {
        z-index: 2;
    }
    .section:nth-child(2) .static-container {
        background-color: green;
    }
    .section:nth-child(3) {
        z-index: 3;
    }
    .section:nth-child(3) .static-container {
        background: none;
    }

    .section.behind {
        position: fixed;
        top: 0;
        z-index: 0;
        background-color: black;
        width: 100%;
    }

and

    <section class="section behind">
        <div class="static-container">
            <div class="container">
                <h1>I'm in the background</h1>
            </div>
        </div>
    </section>  

    <section class="section">
        <div class="static-container">
            <div class="container">
                <h1>Hello World</h1>
            </div>
        </div>
    </section>
    <section class="section">
        <div class="static-container">
            <div class="container">
            </div>
        </div>
    </section>

You need two section elements that are not fixed in order to enable the scrolling. Then, the fixed element sits in the back with a z-index of 0.

hightempo
  • 469
  • 2
  • 8
  • That's very close, but I need both of the contents from both sections to stay in a fixed position while scrolling. – sgarcia.dev Jun 10 '16 at 20:42
  • I guess I don't really understand your question fully, then. As far as I can tell from what you're saying you want one section to scroll up to reveal another section but then you say you want 'both sections to stay in a fixed position' which seems to be contradictory to me. – hightempo Jun 10 '16 at 21:23
  • See this: http://codepen.io/sgarcia-dev/pen/RRrqZz . The content inside the divs with class "fixed" should hide when the container scrolls out of position. Setting position relative allows it to hide like the content does, but it also stops the fixed positioning I need – sgarcia.dev Jun 10 '16 at 21:25
  • I'm not sure that clarifies it for me. When you fix an element, it stays in that position with regard to the browser window. Using nothing but CSS, you can make other non-fixed elements scroll over, or under those fixed-position elements, but that's all. If you want to make elements stay fixed until a user scrolls to a certain point, then shift and become relatively-positioned, you need to use JavaScript like this: http://stackoverflow.com/a/5903078/6441528 – hightempo Jun 10 '16 at 21:32