It's time to pick up where we left off with our vectorised vintage travel poster. Last time, we discussed vector graphics and how they were well-suited for illustrating using flat colours and simple shapes.

This time, we're going to take the design we recreated and explore an interesting optical illusion called the 'Parallax effect' by adding dimension to our poster. Here is the original poster design we picked to use as an example.

Vienna Travel Poster

  • Artist: Kosel, Hermann, 1896-1983
  • Created / Published: Austria, [193-]
  • Description: 1 print (poster) : lithograph, color ; 93 x 61 cm. | Travel poster shows a view of Vienna.
Vienna Travel Poster

Before we start exporting assets and diving into code, let's learn a bit more about the effect.

The Parallax effect is also known as Parallax scrolling. Wikipedia describes it as "a technique in computer graphics where background images move past the camera more slowly than foreground images, creating an illusion of depth in a 2D scene of distance."

The technique grew out of the multiplane camera technique used in traditional animation since the 1930s (most famously by Walt Disney Studios in the production of Snow White and the Seven Dwarfs).

The illusion is used everywhere from film and television, to videogames and websites, and can achieve a wide variety of results depending on how it's implemented. In the same way that vintage travel posters lend themselves well to being vectorised, they're also a good fit for demonstrating parallax.

All about layers

When we created our vector illustration, we grouped elements together based on how far away they appeared to be, eg. the domes and spires in the distance would be further back, and the statues closer to the front.

The poster split into different layers

So now we'll try and create a parallax effect by positioning these layers on top of each other and subtly shifting the position. One of the details that makes the illusion work is making the layers move more slowly the further back they are. This is one way of making them appear further away.

Work in progress below: