Tagged: Silverback

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.

Upfront about IE6

Frankly, this just ain’t gonna happen in IE6. Although we could use javascript to force the browser to display transparent PNGs, its not suitable for this effect. We could use alpha-transparent GIFs instead, but the lack of anti-aliasing will end up looking terrible. My recommendation is to think about your target audience and the browsers they will likely be using, show this effect to those with Safari, Firefox, Opera, or IE7 and use conditional comments to override it in IE6. In my example below, IE6 users just see a flat background image and are none the wiser.

Choosing a suitable scene

It’s a web page that we’re creating, so as always we should be mindful of file sizes. Because it uses large transparent PNGs this effect isn’t frugal on the bandwidth, and although we’re not going to achieve this in under 100k, we should obviously try to avoid making the total image filesize 500k or more! To avoid large file sizes, we should restrict the height of each layer, or choose a scene which works well with horizontally tiled layers. It’s always a compromise because too much tiling becomes obvious and reduces the impact of the effect.

As you can see from Silverback, hanging vines lend themselves nicely to being split into multiple layers because they are positioned in the foreground, middle distance, and background. You might choose a plane flying through some clouds, or a city-scape with houses and skyscrapers. To use a clich�, the only limit is your imagination … and the fact that you should only use 3 or 4 layers. Any more and the overall file size would be too much of a strain on those with delicate Intertubes.

Your page content will become one layer within the scene, and since even the transparent areas of images can’t be clicked “through”, its best to make your content the foreground element unless your page contains no links or forms. We can fake elements nearer to the “camera” if they don’t overlap the content. I’ll come to that later.

Creating your layers

Looking at the Silverback site, there are three layers of vines (1, 2, 3) plus the main content layer at the front (4). Although all of the vines are technically “behind” the main content layer, the foreground vines look closer to the camera because they’re larger, very blurred, and don’t stretch far enough down the screen to ever dip behind Steve (the gorilla) and shatter that illusion.

The main content of the site will naturally be the focal point of the camera, and in the Silverback example the middle distance layer of vines – which appears to be slightly behind the main content – is left without a blur to give the impression that they’re roughly the same distance from the camera as Steve.

Lastly, the back layer of vines are blurred (though not as much as those in the foreground) and slightly lighter, as if fading away into the misty distance. These vines are flattened onto the green gradient which forms the background of the page – since we don’t need to see anything further into the distance, we can use an opaque JPG instead of a transparent PNG. This saves on file size, and as a result allows us to use an image with larger dimensions for the background if we like.

Creating the parallax

There really is nothing new about the CSS we use to create this effect – it’s just cleverly applied. I will give code examples not because it’s difficult but precisely to show how simple it is.

We wrap the content in a “div” which is centered on the screen using this CSS:


div#content{
margin:0 auto;
width:640px;
}


For the purposes of positioning the other layers we need to think in percentages, so it makes sense to do the same thing here. Centering the content effectively positions it 50% of the way across the screen. As you make the browser window smaller, it moves horizontally at half the speed of the window-edge that you’re pulling around with your mouse.

The background layer of vines is tiled horizontally across the body of the website, and positioned 20% of the way across the screen. Although this doesn’t change how it initially looks, it does change how it behaves – 20% of the width is relative to the screen size, so as you make the window smaller the 20% gets proportionally smaller, giving the illusion that the vines are moving slowly to the left (at a fifth of the speed of your mouse).


body {
background:#d3ff99 url(../images/bg-rear.jpg) 20% 0 repeat-x;
}


The middle distance layer of vines is a tiled transparent PNG background on a “div” wrapped around the content. It needs to appear to be between the content and the background, so we need to choose a percentage between 50% (the content) and 20% (the background). For this example, I’ve chosen 40% to position them closer to the content than the background. When you resize the browser you’ll notice that they move slower than the main content, but not by much.


div#midground{
background: transparent url(../images/bg-mid.png) 40% 0 repeat-x;
margin: 0;
padding: 0;
width: 100%;
}


The enlarged and blurred foreground layer of vines follows the same pattern, but for added fun we position the background beyond the top right of the browser window, at 150% (100% would be fixed to the top right), to make it move faster than the browser resize! This gives the illusion that they’re really close to the camera.


div#foreground{
background: transparent url(../images/bg-front.png) 150% 0 repeat-x;
margin: 0;
padding: 0;
width: 100%;
}


Nothing fancy for IE6

Finally, we use conditional comments to make sure IE6 only sees a flat image with no faux-3D effect. Remember to override the foreground style even if you’re overriding it with nothing, by specifying “background:none”.


body{
background:#d3ff99 url(../images/gradient.gif) 0 0 repeat-x;
}
#midground{
background:transparent url(../images/flatvines.jpg) top center repeat-x;
}
#foreground{
background:none;
}


And that’s it! Feel free to use the source code of the Silverback holding page as an aid to understanding my method. There are a couple of variations to this effect, which I’ll mention now.

Genuine foreground

We can move the empty foreground “div” to the start of the HTML and add the following lines to the “div#foreground” CSS to position it actually in front of the content. Doing this will allow its background image to dip over the content but will also mean that the content can’t be clicked. Only use this if your content contains no links or form elements.


position:absolute;
top:0;
left:0;
z-index:1;


Genuine foreground demo (for the purposes of this demo the content is nearer to the top of the page so that it dips behind the shorter foreground vines).

The Rissington Effect

With hat tipped gratefully in the direction of The Rissington Podcast, I should mention the joys of playing around with negative percentages. Notice that the Spitfire at the bottom of their website cleverly moves off the screen to the left as you widen the browser window. It’s positioned at -5%, and the wider the browser the larger 5% of it is, so the further it moves to the left. In our example, if you set the background layers to have negative percentages you can make the landscape appear to rotate around the content as you resize the browser. The more extreme the percentages, the faster the rotational effect.

My happy ending

With all my designs I like to try to include something remarkable, pushing the boundaries of what can be achieved using just HTML and CSS. This technique, combined with others, opens the door to all sorts of possibilities. I can imagine things hiding behind solid foregrounds and only sliding into view as the browser size exceeds a certain dimensions, or elements fading into view as the browser is resized. Show me what you can do!