On Saturday, inspired by Paul Annett’s Channel 4 logo, I decided to build a parallax illusion in the browser.

Here’s the end result: http://maban.co.uk/sandbox/parallax-illusion/

How it works

To build this you only need 2 images. One is the stripes (mine is a 14×8 gif where 6px are transparent, and 8 are black) and the main image which is actually 2 images in 1 layered on top of each other.

The main image is a bird in 2 states – 1 with its wings up, 1 down. You can have more states, but I wanted to keep this very simple.

The stripes are a transparent, repeating background which appear over the image.

The stripes of the image that are visible need to be the same width as the gap between the stripes that go on top of it. So that the wings on the down state aren’t visible while it’s on the up state, you’ll need to position the blank stripes slightly differently on the down state, in this case 6px to the right of the ones on the up state. Then simply layer the two images on top of each other and save them as one image.

The HTML:

<div class="image">
<div class="strips"></div>
</div>

The CSS:

.strips {
background-image:url("strips.gif");
background-repeat:repeat;
background-position:center center;
height:100%;
width:100%;
}
.image {
background-image:url("background.gif");
position:fixed;
background-repeat:repeat-x;
height:100%;
width:100%;
}

All this does is position the stripes over the image, and make both images the full height and width of the screen since there’s no content in them. The image stays in the same place while the stripes move with the width of the window because they are centred.

More parallax illusions

Paul Annett sent me a couple of links to parallax illusions he’d seen that other people have made: one of a horse running, and one of a 3D object.

I’m planning on doing a full write-up for an upcoming issue of Scrunchup.

In an ideal world, all the content is the same height, and blocks will float and clear properly.  But this is not an ideal world.

So below is what happens if the content in some blocks is longer than others.  Yeugh.

We could specify the height, but this is a really bad idea.  You can’t guarantee that the content in the blocks will always be the same height, and you’ll get ugly overlaps if you’re wrong.

One way of achieving this is by wrapping a div round the first three blocks which clears the content above.

But this means adding extraneous divs to your markup.

If we know how many blocks are going to be in each row, we can tell which ones to clear using the nth-of-type selector.

So this clears the 4th, 7th and 10th block

.block:nth-of-type(4),
.block:nth-of-type(7),
.block:nth-of-type(10) {
clear: both;
}


And this adds margins onto every first and second block in a row. (You can probably think of a more streamlined way of doing this if you’re better at maths than me!)

.block:nth-of-type(1),
.block:nth-of-type(2),
.block:nth-of-type(4),
.block:nth-of-type(5),
.block:nth-of-type(7),
.block:nth-of-type(8),
.block:nth-of-type(10),
.block:nth-of-type(11) {
margin-right:40px;
}

Browser Compatibility:

Unfortunately, not many browsers currently support this.  Firefox 3.1+, Safari 4.0, Chrome, Konqueror, and Opera (albeit incorrectly). But if you’ve got a high proportion of users on these browsers, you can have a go at implementing this and get it to degrade quite nicely.