pixleight

• 34710
• 25
• 4

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.

Naturally, I took it as a lunchtime challenge and went about creating something similar myself.

How It's Done

The markup I used:

<div id="stage">
    <div class="block" id="box1">
        <div class="caption">
            <h2>Caption 1</h2>
            <p>Pork belly wes anderson hella authentic ... </p>
        </div>
    </div>
    <div class="block" id="box2">
        <div class="caption">
            <h2>Caption 2</h2>
            <p>Sriracha single-origin coffee art party narwhal ... </p>
        </div>
    </div>
    <!-- and so on ... -->
</div>

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.

Then, I went about adding some styling:

#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; }

I used a fixed size on the stage and set the overflow to scroll to get the "window" effect.

Then, notice background-attachment: fixed on the blocks. This prevents the background images from scrolling with their divs when you scroll through them.

Then, I just added a 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;

}

There you have it. Simple, effective, and a generally good-looking effect.

The biggest drawback is that when background-attachment is fixed, its position applies to the viewport, not 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.

Related: