How to recreate Silverback’s parallax effect. When I was a lad, I remember being wowed by an effect in Sonic the Hedgehog known as parallax scrolling.
Moving my little spiky friend to the right caused the foreground to move past the camera to the left faster than the background, creating a faux-3D view of Green Hill Zone. We can create a similar effect on a web page by fixing semi-transparent background images to different sides of the browser viewport, and at different horizontal percentage positions. In addition to this, blurring some of those images will emulate focus and depth-of-field. The effect can only be seen as the browser window is resized, but I really like the subtlety of this — not everybody will notice it, but it’s like a hidden Easter egg for those who do. I used this effect with great success on the holding page for Clearleft’s latest project, Silverback. HTML, CSS, and Javascript from the Ground Up - Google Code University - Google Code. Tutorials.