Parallax Wallpaper Scroll

One of the recent popular trends in web design has been a vertical parallax scroll effect that moves the background of a page at a different speed to the actual content. The intention is to create the illusion of depth within the page by making the background appear further away.

How hard is it? Well actually it's pretty simple if we resort to CSS and JavaScript. First things first, we need an image that tessalates nicely:


Yep, that will do nicely.

OK, let's fix this image to the top of our document so that it initially doesn't scroll with the page:

Our next task is to knock up a line of JavaScript that will read the scroll offset position of the page and convert that into a number that we can use for positioning the background image. To save precious CPU cycles, we only want it to occurr when the page actually scrolls.


That's all, folks!

That really is all you need - every time you scroll the page the onscroll event jumps in to calculate the Y-position of your background image. In the JavaScript, pageYOffset/3 scrolls the background at 1/3rd of the speed of the page, and you can tweak this by changing the ratio.

 

bl0ke

(There now follows some dummy text to ensure the page scrolls on even the largest monitors...)

C64 Screenshot Challenge

Test your knowledge of C64 game screens with this fun little game based on Catchphrase.15th September 2013

Atari 2600 Box Art Quiz

Test your knowledge of (or simply marvel at the irrelvence of) Atari Box Art in this spectacularly underwhelming quiz!2nd September 2013

JavaScript Konami Code

How to create an event that triggers when a user enters the Konami Code into your website.29th August 2013

Parallax Wallpaper Scroll

How to achieve that groovy vertical parallax scrolling effect with minimum effort.21st August 2013

Minecraft Redstone Lighthouse

A guide to creating a lighthouse effect in Minecraft using Redstone lamps and repeaters.29th August 2013

LazyTown 'You are a Pirate!' Lyrics

Lyrics and video from LazyTown's incredibly addictive 'You are a Pirate!' song.18th August 2013

Billy Ze Kick

Discography of Billy Ze Kick, aka Nathalie Cousin and friends.1st October 2012