I'm attempting to recreate the unique effect seen on this website. On that site, when you scroll down to the bottom of the page, a map appears with a "peeling effect", as if the previous DIVs were sliding above the map. I tried replicating this in a jsfiddle here (using a red div instead of a map) but it's not working correctly. Thanks for any assistance you can provide.
HTML
<div class="block">Block</div>
<div class="block">Block</div>
<div class="block">Block</div>
<div class="block">Block</div>
<div class="block">Block</div>
<div id="map"><div id="map-canvas"></div></div>
CSS:
Html, body {
min-width: 980px;
background: #CCC;
font-family: 'Open Sans', sans-serif;
}
.block {
padding: 20px;
background: green;
height: 400px;
width: 600px;
margin-top: 30px;
margin-left:50px;
}
#map {
position: fixed;
bottom: 0;
z-index: 1;
}
#map, #map-canvas {
width: 100%;
height: 500px;
float: left;
background: red;
position: relative;
overflow: hidden;
}