18:44 46

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.



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

Tested on desktop versions of Chrome, IE11, Edge, Safari, Opera and Firefox. Any problems are entirely your own.