How to achieve parallax behind horizontal bars while scrolling

Question

I've seen this effect a couple times now, but I can't find a "name" for it - what's it called? What's the basic theory behind this effect? Does it use pure CSS, or is it primarily driven by JS?

Description:

As the user scrolls vertically down the page, the solid background gives way, à la "curtain reveal", to a background image. Rather than just reaching the bottom of the page, however, another horizontal bar, moving at the same rate as the previous "solid background", covers up the background image from the bottom. As the user continues to scroll, the solid background again gives way to a background image, but this time the background has changed to some other image. The effect is similar to a magician waving his or her hand in front of an object and the object substantially changing in some way.

Another way to put it is that there are "gaps" in the solid background though which different background images can be seen.

Here's an example I found (after a good bit of searching): http://www.astoriacassis.com/
(Ignore the "gallery"-style rotating image at the top. Scroll down and notice the picture of the pool and then later a lamp with an elephant on it.)

Initially I thought it might be something similar to the parallax effect, but it actually appears to be substantially different.

I've seen this effect before and I'd like to know how to replicate it.

Answer 1

This is achieved by exploiting the background attachment property on moving divs to create an effect that causes the images to appear to change, while it is in fact two divs simply scrolling up the screen.

Check out this CodePen for a demo: http://codepen.io/anon/pen/sCuvI/

The important parts:

HTML

<div class="content">
  Lorem Ipsum
</div>
<div id="s1" class="scroll"></div>
<div class="content">
  Lorem Ipsum
</div>
<div id="s2" class="scroll"></div>

CSS

.scroll
{
  width: auto;
  height: 200px;
  /*The important part*/
  background-attachment: fixed;
  background: no-repeat center center fixed;
  /*Stretch the background*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}