Paul Hayes & FofR Online; web design portfolio and experiments

Here’s another quick CSS3/WebKit trans­itions pro­ject in the con­tro­ver­sial realm of CSS anim­a­tion. This time I have opted to recre­ate the pop­u­lar par­al­lax effect using mul­tiple back­ground images on a single ele­ment and the -webkit-transition prop­erty (doc­u­ment­a­tion). I have based this on Chris Coyier’s par­al­lax tutorial, reusing the star images with per­mis­sion, the tech­nique itself was coined by Paul Annett (explan­a­tion on Think Vit­amin). If you’re not quite sure what par­al­lax is, then Chris and Paul both go into some depth to explain it and Wiki­pe­dia is always helpful.

Res­ult

Exper­i­ment: Auto-scrolling CSS3 Par­al­lax Effect
Exper­i­ment works in Safari 4 Beta and Google Chrome. No JavaS­cript necessary.

How To

The HTML markup is fairly simple, one DIV for the back­ground and another for the con­tent, the example uses CSS3’s mul­tiple back­grounds, so no need for extra markup to accom­mod­ate all those other images:

<div id="background"></div>
<div id="content">
	Content
</div>

For the CSS the back­ground con­tainer is set to a fixed pos­i­tion (for con­veni­ence more than any­thing) and spread across the bot­tom of the page using the top, left, bot­tom and right prop­er­ties. The back­ground images are defined using the back­ground short­hand prop­erty with mul­tiple declar­a­tions being comma delim­ited, the first being the top-most. Each of the images has a dif­fer­ent pos­i­tion defined in per­cent­age, so as the size of the con­tainer changes (e.g. on win­dow res­ize) the images move dis­pro­por­tion­ately to each other; cre­at­ing the impress­ive par­al­lax effect.

#background {
	background: url('../images/foreground.png') 5% 5%,
		url('../images/midground.png') 20% 20%,
		url('../images/background.png') 90% 110%;
}

Ordin­ar­ily this effect is only seen when the page is re-sized or JavaS­cript is used for anim­a­tion. My first approach to anim­a­tion via CSS was to apply the trans­ition to the background-positions, with background-position being an animat­able prop­erty as defined in the pro­posed spe­cific­a­tion. How­ever this doesn’t yet work in the latest Web­Kit nightly build (r42142), it is a known bug.

As an altern­ate route, albeit a tem­por­ary one, I have opted to use trans­itions to anim­ate the left-most edge of the back­ground con­tainer (for instance from 0px to –100px). This gradu­ally alters the over­all width of the con­tainer caus­ing the back­grounds to shift dis­pro­por­tion­ately as per their per­cent­ages, cre­at­ing the par­al­lax effect. With a large enough dur­a­tion and left pos­i­tion the effect appears to be continuous.

#background {
	left: 0;
	-webkit-transition: left 300s linear;
}

#experiment:target #background {
	left: -5000px;
}

To make things a bit more fun I’ve increased the ‘fly­ing speed’ when the mouse hov­ers over the back­ground area. The final CSS looks like this:

#background {
	background: url('../images/foreground.png') 5% 5%,
		url('../images/midground.png') 20% 20%,
		url('../images/background.png') 90% 110%;
	top: 218px;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	-webkit-transition: left 300s linear;
}

#experiment:target #background {
	left: -5000px;
}

#experiment:hover #background {
	left: -9999px;
}