Scrolling Image Reveal
I’d like to share with you this pretty neat image scrolling effect created by Chris Violette using only the wonderful capabilities of CSS. It’s a nice slider to have as a header. It’s lightweight, meaning that it doesn’t slow down your site as much as using a complicated jQuery-based image slider. The effect was based on the effect seen on Yahoo! TV, which of course, you can now also apply on your website!
Just follow and copy the code below.
HTML
<div id="stage">
<div id="box1">
<div>
<h2>Caption 1</h2>
<p>Pork belly wes anderson hella authentic ... </p>
</div>
</div>
<div id="box2">
<div>
<h2>Caption 2</h2>
<p>Sriracha single-origin coffee art party narwhal ... </p>
</div>
</div>
<!-- and so on ... --> </div>
The whole set of images is wrapped inside one div container (“stage”) and is under the same class (“block”) but each image is assigned its own unique ID (box1, box2, etc.). There’s also a caption div for each image’s caption.
CSS
#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;
}
To get the window effect, the over-flow attribute of the stage is set to scroll. The background-attachment:fixed on the blocks prevents the background images from scrolling with their divs when you scroll through them.
The following code below is added for the background image for each div:
#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;
}
And there you have it! If you want to tinker with the code a bit and see the corresponding result before applying it to your site, you can do so over at Chris’ dabblet page. Enjoy!
0
509
