Scolling Image "Reveal" Demo

dabblet.css

/**
 * Scolling Image "Reveal" Demo
 */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

html {
	background: #EEE;
	min-height: 100%;
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
}

#wrapper {
	width: 960px;
	margin: 650px auto 25px;
}

pre {
	padding: 10px;
	font-family: monospace;
	background: #FFFFF0;
	border: 1px solid #FFFF90;
	overflow: scroll;
}

#stage {
	height: 600px;
	width: 960px;
	overflow: scroll;
	box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 20px 20px #EEE;
	position: fixed;
	top: 25px;
}

.block {
	width: 100%;
	height: 600px;
	background-attachment: fixed;
	background-position: 50% 25px;
	background-repeat: no-repeat;
	position: relative;
}

.caption {
	position: absolute;
	z-index: 2;
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	height: auto;
	bottom: 0;
	color: #FFF;
}

#box1 {
	background-image: url(http://flickholdr.com/1000/800/corgi);
}

#box2 {
	background-image: url(http://flickholdr.com/1000/800/narwhal);
}

#box3 {
	background-image: url(http://flickholdr.com/1000/800/cow);
}

#box4 {
	background-image: url(http://flickholdr.com/1000/800/duck);
}

dabblet.html

<div id="wrapper">
	<h1>Scolling Image "Reveal" Demo</h1>
	<p>A coworker sent me a link to a website that showed large images with a caption at the bottom and, as you scrolled down the page, the next image was revealed as if it was "wiped" into view by the caption.</p>
	<p>Naturally, I took it as a lunchtime challenge and went about creating something similar myself.</p>
	<p>Above is the result, scroll through the images to see the effect. <a href="#howto">Skip ahead</a> to see how it's done.</p>
	<p style="text-align: center; font-size: 0.9em;">Placeholder text by <a href="http://hipsteripsum.me/" target="_blank">Hipster Ipsum</a>. Placeholder images by <a href="http://flickholdr.com/" target="_blank">flickholdr</a>.</p>
	<hr />
	<div id="stage">
		<div class="block" id="box1">
			<div class="caption">
				<h2>Caption 1</h2>
				<p>Pork belly wes anderson hella authentic, food truck pour-over quinoa freegan kogi put a bird on it photo booth squid pickled. Artisan dreamcatcher pitchfork sustainable.</p>
			</div>
		</div>
		<div class="block" id="box2">
			<div class="caption">
				<h2>Caption 2</h2>
				<p>Sriracha single-origin coffee art party narwhal fingerstache, mixtape brooklyn messenger bag. Irony chillwave Austin wolf lomo american apparel fixie small batch sustainable VHS.</p>
			</div>
		</div>
		<div class="block" id="box3">
			<div class="caption">
				<h2>Caption 3</h2>
				<p>Dreamcatcher semiotics chambray, banh mi whatever seitan hoodie cosby sweater narwhal keffiyeh etsy freegan wolf lomo polaroid. Whatever narwhal mumblecore beard +1 artisan. </p>
			</div>
		</div>
		<div class="block" id="box4">
			<div class="caption">
				<h2>Caption 4</h2>
				<p>Organic Austin messenger bag artisan odd future. Mlkshk brooklyn wolf messenger bag cray. Before they sold out chillwave ethical pork belly trust fund williamsburg vegan portland banksy. Fingerstache thundercats master cleanse tattooed, semiotics bicycle rights PBR yr. Letterpress 3 wolf moon.</p>
			</div>
		</div>
	</div>
<h2 id="howto">How It's Done</h2>

<p>The markup I used: </p>
<pre>
&lt;div id="stage"&rt;
	&lt;div class="block" id="box1"&rt;
		&lt;div class="caption"&rt;
			&lt;h2&rt;Caption 1&lt;/h2&rt;
			&lt;p&rt;Pork belly wes anderson hella authentic ... &lt;/p&rt;
		&lt;/div&rt;
	&lt;/div&rt;
	&lt;div class="block" id="box2"&rt;
		&lt;div class="caption"&rt;
			&lt;h2&rt;Caption 2&lt;/h2&rt;
			&lt;p&rt;Sriracha single-origin coffee art party narwhal ... &lt;/p&rt;
		&lt;/div&rt;
	&lt;/div&rt;
	&lt;!-- and so on ... --&rt;
&lt;/div&rt;
</pre>
<p>Wrapped by a "stage" div, each image section has its own block with a unique ID. Then, there is a caption div for each image's caption.</p>
<p>Then, I went about adding some styling:</p>
<pre>
#stage {
	height: 800px;
	overflow: scroll;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.block {
	width: 100%;
	height: 800px;
	background-attachment: fixed;
	background-position: 50% 0;
	background-repeat: no-repeat;
	position: relative;
}

.caption {
	position: absolute;
	z-index: 2;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	height: auto;
	color: #FFF;
}
</pre>
<p>I used a fixed size on the stage and set the overflow to scroll to get the "window" effect.</p>
<p>Then, notice <span style="pre">background-attachment: fixed</span> on the blocks. This prevents the background images from scrolling with their divs when you scroll through them.</p>
<p>Then, I just added a background image for each div:</p>
<pre>
#box1 {
	background-image: url(http://flickholdr.com/1000/900/corgi);
}

#box2 {
	background-image: url(http://flickholdr.com/1000/900/narwhal);
}

#box3 {
	background-image: url(http://flickholdr.com/1000/900/cow);
}

#box4 {
	background-image: url(http://flickholdr.com/1000/900/duck;
}
</pre>
<p>There you have it. Simple, effective, and a generally good-looking effect.</p>
<p>The biggest drawback is that when background-attachment is fixed, its position applies to the viewport, <em>not</em> the parent element. So as the page scrolls, the "window" you see the background image through moves. For the purposes of this demo, I fixed the stage element to the top of the window to minimize this drawback, but I think this effect would probably look best with a "stage" container that spans the full height of the viewport.</p>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}