I recently saw a very interesting visual effect that I can only describe in a series of antonyms: a fixed, scrolling, disappearing banner. This article details my recreation and explanation of the effect.

Drawing A Line

In principle, execution of this kind of effect could be achieved by making the front image an alpha-masked 32-bit PNG. The problem with that is two fold: the file size of the PNG will be enormous for a full-width page hero image, and we’d need another copy of the image for the background. I addressed that problem by making only part of the image - the section that the text will slide behind - a transparent PNG.

The text of the banner is placed before the PNG in a <header> element:

<header>
    <h1>Land <span>of the</span> Lost</h1>
    <img src="mountain-range-front.png" alt>
</header>

The text of the page (from Xenophon’s Anabasis) is placed below the <header>, in a <main> element:

<main>
  <p>From this point he marched two stages…
</main>

The full version of the image is saved as a JPG, and is applied as the background of the element with CSS. Since the background image won’t size it’s containing element by itself, and the PNG image will need to be responsive, we size the <header> using padding-top. To determine the correct value, we divide the full image’s height by its width:

926 / 1500 = 0.6193333333

The CSS for the header becomes:

header { 
    background: url(mountain-range.jpg) no-repeat;
    padding-top: 61.73333333%;
    background-size: cover;
}

The PNG image is 45.8% of the width of the full-size version of the image. It’s placed at the right of the <header>, and styled appropriately:

header img {
    position: absolute;
    top: 0;
    right: 0;
    width: 45.8%;
}

The heading is provided with a fixed position, and styled using vw units so that the text is always the same width as the covering PNG:

header h1 { 
    position: fixed;
    top: 2rem;
    right: 2rem;
    font-size: 12vw;
    line-height: .8;
    margin-top: 0;
    text-align: center;
}
header h1 span {
    display: block;
    font-size: 8.75vw;
}

A Unlimited Horizon

There’s a problem with providing anything with fixed: while the affected element will respect the automatic layering and slide behind the mountain range of the PNG, it will reappear again below the <header> as the page continues to scroll, obscuring the body text. The fixed element will even ignore overflow: hidden placed on the container.

The easiest solution is the most straightforward: place a relative position on the <main> element below the <header> so that it is automatically layered higher, then provide it with a white background and border to ensure that it covers all the way to the bottom edge of the <header>:

main { 
    background: #fff;
    position: relative;
    border: 1px solid #fff;
    padding: 2rem 25%;
}

Many mobile browsers still don’t support fixed positioning for a variety of reasons, meaning that the heading won’t move independently on iOS. However, there’s still a need to adjust the layout at smaller screen sizes:

@media all and (max-width: 400px) {
    main { padding: 2rem; }
}

Conclusion

The result works very well for full-width page designs, while the file size of the images could be reduced further by using WebP formats and / or srcset and image-set().

Photo by eflon, licensed under Creative Commons. The heading in the banner uses the excellent Sucrose Two by Yellow Design Studio.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/yaWzzR