Skip to content

Auto-scrolling Parallax Effect without JavaScript

Here’s another quick CSS3/WebKit tran­si­tions project in the con­tro­ver­sial realm of CSS ani­ma­tion. This time I have opted to recre­ate the pop­u­lar par­al­lax effect using mul­ti­ple back­ground images on a sin­gle ele­ment and the -webkit-transition prop­erty (doc­u­men­ta­tion). I have based this on Chris Coyier’s par­al­lax tuto­r­ial, reusing the star images with per­mis­sion, the tech­nique itself was coined by Paul Annett (expla­na­tion on Think Vit­a­min). If you’re not quite sure what par­al­lax is, then Chris and Paul both go into some depth to explain it and Wikipedia is always help­ful.

Result

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

Correctly rendered background images for parallax effect

How To

The HTML markup is fairly sim­ple, one DIV for the back­ground and another for the con­tent, the exam­ple uses CSS3’s mul­ti­ple back­grounds, so no need for extra markup to accom­mo­date 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 posi­tion (for con­ve­nience 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­ti­ple dec­la­ra­tions being comma delim­ited, the first being the top-most. Each of the images has a dif­fer­ent posi­tion defined in per­cent­age, so as the size of the con­tainer changes (e.g. on win­dow resize) the images move dis­pro­por­tion­ately to each other; cre­at­ing the impres­sive par­al­lax effect.

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

Ordi­nar­ily this effect is only seen when the page is re-sized or JavaScript is used for ani­ma­tion. My first approach to ani­ma­tion via CSS was to apply the tran­si­tion to the background-positions, with background-position being an ani­mat­able prop­erty as defined in the pro­posed spec­i­fi­ca­tion. How­ever this doesn’t yet work in the lat­est WebKit nightly build (r42142), it is a known bug.

As an alter­nate route, albeit a tem­po­rary one, I have opted to use tran­si­tions to ani­mate the left-most edge of the back­ground con­tainer (for instance from 0px to –100px). This grad­u­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 dura­tion and left posi­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;
}

Paul Hayes Paul Hayes is a developer at Last.fm. You should follow him on Twitter, where he talks about UX, HTML, CSS and JavaScript, amongst other cool stuff.

12 Comments

  1. Tim Wright

    very cool, I didn’t know tran­si­tion was active in webkit yet

  2. David Kaneda

    Nice sam­ple — hope it’s okay I linked to it over at WebKit­Bits.

    Have you con­sid­ered using “-webkit-animation-iteration-count: infi­nite;” — I could see that work­ing well.

  3. Paolo

    Very nice demo! It works with the webkit ver­sion of epiphany under Linux as well.

    To install it on ubuntu:

    sudo apt-get install epiphany-webkit

    or use the pack­age man­ager, with way more clicks ;-)

  4. Arnaud Meuret

    Well, quite a mis­lead­ing post title. What about being hon­est and rename it to:

    Auto-scrolling par­al­lax effect with pro­pri­etary Webkit CSS3” ?

    Do not get me wrong, I do admire peo­ple like you who take the time to share their find­ings, I’m try­ing to do it myself. But I dis­like bait URLs.

  5. Keith Pickett

    I have to agree with Arnaud. While I really like this effect, it would have been more use­able to me that it was titled specif­i­cally to CSS3/Webkit. It doesn’t work in FF and I assume IE. I have to develop on a plat­form that is com­mon to all browsers.
    Be that as it may, it’s a great piece of code.

  6. Tyler

    I’m work­ing on a series of “Javascript Feel­ings” which attempt to explain com­plex human emo­tions using Javascript. I’ve used the par­al­lax effect in my first piece enti­tled “Inti­macy With Strangers.”

    http://​very​to​gether​.com/​l​i​f​e​s​t​y​l​e​/​p​l​a​y​/​j​a​v​a​s​c​r​i​p​t​-​f​e​e​l​i​n​g​s​-​i​n​t​i​m​a​c​y​-​w​i​t​h​-​s​t​r​a​n​g​e​r​s​.html

  7. Tyler Hayes

    Is it pos­si­ble to ani­mate the prop­erty imme­di­ately on page-load with­out using a dynamic pseudo-class?

    I.e. the stars move imme­di­ately upon load­ing experiment.php, not experiment.php#experiment.

  8. Oscar

    I am a beg­giner at this can you please tell me where I can down­load the files for this tutorial?

    I try to recre­at­ing it but had no luck.

    Thanks.

  9. rory

    Space the Final Fron­tier…
    This looks so sick, mind blow­ing cod­ing awesome.

  10. Anirban

    Superb !! Thanks :)

  11. envira

    awesome…i am lov­ing it,thanks

  12. Aina

    Sweet, not to steal your spot­light, but I have a related tuto­r­ial here: ainalem​.com/​p​a​r​a​l​l​a​x​.html