Parallax Illusion

/39

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: https://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.