Parallax Burns: Converting Photographs from 2D to 3D with SVG

Last week we talked about ZorroSVG, a tool for converting your chunky transparent PNG-32s into slim and flexible SVGs.

That got me thinking.

A few weeks earlier, I talked about the use of the Ken Burns effect in film and television.

[caption id="attachment_126366" align="alignright" width="334"] Figure 1: The 'Parallax Ken Burns' effect (as a GIF)[/caption]

But there’s another similar, but slightly more sophisticated technique that pans and/or zooms different layers of a photograph at different rates to give the image a slightly 3D effect. Sometimes this is called a ‘Parallax-Ken Burns effect’, other times ‘The 2D to 3D Effect’, sometimes it’s the ‘2.5D Effect’. You might think of it as the ‘History Channel effect’ but it could just as easily be the ‘VH1: Behind the Music effect’.

This is a classic videographers trick, so all the tutorials you’ll find on Youtube for this effect are aimed at Adobe After Effects users.

But what if we could mimic the effect entirely inside a standalone SVG graphic?

That was the plan.

It didn’t quite work out that way (yet) but I thought it might be useful to share what I have so far. Let me be clear: this is a jumping-off point for people, rather than a finished production-ready product. I know it doesn't work in Opera 3. ;)

I don’t want to get super code-heavy here, but you should be able to pick through the CodePen to understand the detail.

The plan was to…

1. Break down a photograph into three overlapping layers – front, middle, and background.
2. Convert those layers into SVGs using ZorroSVG.
3. Manually re-combine those layers into a single multi-layered SVG
4. To use CSS animation inside that SVG to get the Parallax-Burns effect.

First take

The Photograph

[caption id="attachment_126371" align="alignright" width="400"] Figure 2: Woodrow Wilson archive image[/caption]

My first task was to find a good image to work with. I found this nice copyright-free archive photo of Woodrow Wilson from Flickr (fig 2) that has a good sense of depth to it.

After dropping it into Photoshop, I repaired the damage in the bottom half and then split it into three separate layers (all PNG-32s):

1. Foreground: The fence in the foreground
2. Middle ground: Wilson and his fellow VIPs
3. Background: The remainder of the grandstand

As we’re going to be moving these layers in relation to each other, we’ll need to create some extra image to fill the gaps. I used Photoshop’s ‘content-aware fill’ to clone in new image behind the fence and also behind Wilson and co. It’s pretty rough but it will do.

Now we have our raw image components.

The SVG Markup

CodePen allows you to write SVG markup straight into the HTML panel so it’s a great place to play with SVG ideas. Let’s go straight to my first ‘proof of concept’ test:

See the Pen SVG Parallax Burns by Alex (@alexmwalker) on CodePen.

• http://ift.tt/1pykwJd

You’ll notice that the fence layer moves farther and faster than the middle layer as it’s closer to us. That's the key to the parallax effect.

In SVG, there are two ways to put pixel-based images into your file – and it’s really no different to HTML in that regard.

Method 1. Encode & embed your pixels:

You can base-64 encode your pixels. This just turns your image into a long string of numbers and letters that you can paste into your SVG document in any text editor. This is precisely what ZorroSVG does and if you open a ZorroSVG file in a code editor you’ll see something like this:

Encoded images are a little unwieldy to work with, but it’s worth it to be able to encapsulate everything in a single, standalone file. This work break if you download it, or move it to another folder, or lose your internet connection.

Method 2. Link your pixels via URL:

As we commonly do with our HTML, it’s possible to link to an external image from inside your SVG like this.

[code language="html"]
<image class="back"
xlink:href="http://ift.tt/1RAPd7a"
x="0" y="0"
width="970" height="690">
</image>

[/code]

This is neat and easy-to-work-with, but if your SVG and image resources get moved or separated somehow, your SVG will have sad 'missing image' flags in it. I don’t like that idea.

Nevertheless that’s exactly what I’m doing in the CodePen test above. The three IMAGE elements are stacked back to front. We’ve given each IMAGE element a sensible CSS classname too – .front, .mid and .back.

I’m not going to explain every line of code but the noteworthy parts include:

• Inside the STYLE tags at the top of the SVG, you’ll see two simple CSS scaling animations - parallax-front and parallax-mid.
• I’m getting a bit fancy by adding an SVG blur filter (filter:url(#effect-1); ) to the front and back layers, but leaving Wilson’s layer sharp to increase the depth. Ideally, I’d love to slowly dial-up that blur effect as we zoom in to increase the 3D feel. But not for this demo.
• The ‘transform-origin’ property of 50% 50% means we will be scale/zooming into the exact center of our image. A value of 50% 100% would feel like we were moving in-and-under Wilson. A value of 50% 0% would feel like we were zooming over his head.

As a test, I think this is very successful. There’s a real sense of time and space that isn’t present in the original photo. But on the down-side, the SVG relies heavily on external files that may not always be available. Things would be much more robust if we could sink it all into a single, standalone file.

Continue reading %Parallax Burns: Converting Photographs from 2D to 3D with SVG%

by Alex Walker via SitePoint