javascript - How to achieve parallax behind horizontal bars while scrolling -

i've seen effect couple times now, can't find "name" - what's called? what's basic theory behind effect? use pure css, or driven js?

description:

as user scrolls vertically down page, solid background gives way, à la "curtain reveal", background image. rather reaching bottom of page, however, horizontal bar, moving @ same rate previous "solid background", covers background image bottom. user continues scroll, solid background again gives way background image, time background has changed other image. effect similar magician waving or hand in front of object , object substantially changing in way.

another way put there "gaps" in solid background though different background images can seen.

here's example found (after bit of searching): http://www.astoriacassis.com/
(ignore "gallery"-style rotating image @ top. scroll down , notice picture of pool , later lamp elephant on it.)

initially thought might similar parallax effect, appears substantially different.

i've seen effect before , i'd know how replicate it.

this achieved exploiting background attachment property on moving divs create effect causes images appear change, while in fact 2 divs scrolling screen.

check out codepen 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 background*/   -webkit-background-size: cover;   -moz-background-size: cover;   -ms-background-size: cover;   -o-background-size: cover;   background-size: cover; }