Part of the Scrolling Effects Reading List

Cet article est également disponible en français

A popular presentation technique is something I call “background reveal scroll”: as the page is scrolled upwards, images are covered and revealed in the background.

While trendy, the technique does have the advantage of concentrating content into a few bold images and short pieces of text. However, the effect is often accomplished by loading a heavy JavaScript framework and a plugin; which, as I’ll show here, are entirely unnecessary in modern browsers.

Windows & Shades

The basic setup for the effect might be compared to a series of open “windows” and closed “shades” stacked on top of each other, each the exact height and width of the browser viewport.

Let’s start with some basic markup. The windows and shades could be made from almost any HTML container element; I’ll use <section> tags: 

<section>
	<h1>Come To Iceland</h1>
</section>
<section>
	<h1>The last settled part of Europe, much of Iceland remains pristine and untouched.</h1>
</section>
...

To make each of these elements the right size, I’ll remove any margin from the <body> element, make sure the <section> elements are sized using border-box, and make each the exact height of the current viewport by using vw units. Text will be formatted using the same scalable units: 

body { margin: 0; }
section {
	box-sizing: border-box;
	height: 100vh; 
	text-align: center; 
	padding: 2vw;
	font-size: 6vw;
}

The <section> elements are already full-width. To center their content, I’ll use . Those that display backgrounds all have the same treatment, so I’ll include that in the declaration also: 

section {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center; 
	flex-direction: column;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

flex-direction is used to cover any “windows” that contain multiple lines of text. In the first section, the text is larger, white and in all caps, with a text-shadow to distinguish it from the background: 

section:first-of-type {
	text-transform: uppercase;
	color: #fff;
	font-size: 8vw;
	text-shadow: 0 0 5px rgba(0,0,0,0.4);
}

Even <section> elements have a white background: 

section:nth-of-type(even) {
	background: #fff;
}

Odd <section> elements have background images: 

section:nth-of-type(1) {
	background-image: url(iceland-fjords.jpg);
}
section:nth-of-type(3) {
	background-image: url(iceland-pool-faces.jpg);
}
section:nth-of-type(5) {
	background-image: url(iceland-ice.jpg);
}

And that’s it! Of course, this version is limited to modern browsers that support vh, vw, and flexbox; if you were going for older browsers, CSS fallbacks are certainly possible: table-row CSS display mode for each <section>, for example.

The font used is the excellent Edelsans by Jakob Runge, used with permission. Photographs by Gueorgui Tcherednitchenko, Moyan Brenn and Nate Bolt, licensed under Creative Commons.

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/lejFx