Parallax Magritte is a web experiment that transforms René Magritte's artworks into a 3D space. This allows viewers to see previously unseen parts of the original paintings by tilting their tablets or smartphones.

Demo video

_{Website structure}

Parallax effect

To build a 3D space from a plane painting, I first needed to separate each layer of the painting using Photoshop. The tricky part was filling the empty spots by copying and pasting from other similar parts of the painting. Some layers needed to be expanded to have extra space visible when the image moves.

_{Parallax layer structure}

_{Parallax artwork}

Creating the 3D space with the separated images using Parallax.js mainly involved sizing and positioning each layer with CSS. This ensured that each painting achieved the best parallax effect within the given boundaries.

Built with Parallax.js by Matthew Wagerfield & Claudio Guglieri.