Photorealistic 3D Parallax Effects in HTML or Adobe DPS with Adobe Photoshop and Adobe Edge Animate

A few weeks ago, a fellow Adobe colleague showed me a DPS publication that had an amazing design. All of the content looked great by itself, but what really made parts of it “pop” was that in certain areas there was a 3D parallax effect, which made it feel like you were looking into an image that had depth. You could rotate the device and see what’s hiding behind a person, or around the corner of a building.

Here’s what I mean… on the surface the image looked static, but as I rotated it, elements shifted to give the illusion of depth. The background and foreground elements all moved at different rates:

animation

3D Parallax Effects on a Device

I thought this was an incredible example of added interactivity and immersive experiences, and it’s not really that difficult to implement. In fact, I put together this tutorial to show exactly how you can create these types of effects in your own compositions.

To create this kind of an effect, the first thing you need to do is break apart an image into layers – note: you may need to synthesize edges so that there is an overlap in all transparent areas. Then you need to add interactivity in HTML. Align those images so that their default state looks just like the still image, then move the images based upon the device orientation. I move the foreground one way, keep the middle content more or less stationary, and move the background content the opposite direction (all based upon which way you are rotating the mobile device). Since this is all HTML, you can take this content and use it on the web, or import it into Adobe InDesign to export a DPS digital publication.

Step 1: Create Layered Images

You can either create your own layers, or break apart an existing image into layers so that each individual layer can be placed over top each other to form a seamless composition. In this case, I separated the strawberries, the rows of plants, my daughter, and the sky out to separate layers.

Break Apart Layers in Photoshop

Break Apart Layers in Photoshop

To achieve this, I used the following in Photoshop:

Yes, I did this quickly, and there are still some artifacts visible from the layering process.

Step 2: Create Edge Animate Composition

Next, pull all of those images into an Edge Animate composition so you can create the parallax behavior on the timeline. I actually used the exact same technique that fellow Adobe evangelist Paul Trani uses in his parallax scrolling example.

Edge Animate Composition

Edge Animate Composition

The only difference in mine is that I added some simple HTML and JavaScript to handle device-specific behaviors. I added the following:

An HTML meta tag to the root HTML file to prevent device scaling:

<meta name = "viewport" content = "user-scalable=no, width=device-width"/>

JavaScript to disable touch interactions (prevents touch scrolling):

document.addEventListener('touchstart', function(event){
   event.preventDefault();
   return false;
});

JavaScript to handle device orientation – this jumps to a specific point in time in the timeline animation based on the device orientation:

window.ondeviceorientation = function(event) {
   var delta = Math.round(event.beta);

	switch (window.orientation) {
		case 0:
			delta = Math.round(event.gamma);
			break;
		case 180:
			delta = -Math.round(event.gamma);
			break;
	}

   var position = 15000 + (delta * 400);
   position = Math.floor(position);
   sym.stop(position);
   console.log(position);
}

Update 1/7/2014: I added logic to support both landscape and portrait orientation.

Be sure to add both of those JavaScript snippets inside of the creationComplete event for the Stage.  I also over-exaggerated the movement in the timeline.  I think it would look better with slightly less (more subtle) movement.

At this point, you could publish the composition and use it on the web – there’s nothing stopping you at all. In fact, you can check it out here, just load it on an iPad and rotate the device to see the effect. However, please keep in mind that 1) I haven’t added a preloader, 2) the assets are non-optimized and are all retina size , 3) I don’t have it auto scaling for the viewport size, so it will only look right on a retina iPad, and 4) I have only tested this on an iPad – no other devices.

Note: You could also do this without using Edge Animate, but you’d have to hand code the HTML/JS for it.

You can download the source for the Edge Animate project here.

Step 3: Include in InDesign/DPS Composition

To include this in a DPS publication, all that you need to do is export an Animate Deployment Package (.oam file) from Adobe Edge Animate. You can then just drag and drop this into InDesign for inclusion in a DPS publication.

Including the Animation in an InDesign layout for DPS

Including the Animation in an InDesign layout for DPS

Be sure to check out the DPS Getting Started Guide to learn more about DPS, and check out the docs on Web Content Overlays to learn about HTML usage inside of DPS publications.

If you aren’t already a member of Creative Cloud, join today to take advantage of all of our creative tools!

Update: After publishing this I realized that the movement of the plants should actually be reversed.  If you view this link, you’ll see the updated motion (which looks more realistic), but I can’t update the video that’s already been published.

  • Haeme Ulrich

    Great manual, thank you! The download link is dead. Could you relink it? All the best, Haeme

    • http://tricedesigns.com/ Andrew Trice

      Thanks! the download link should work now.

  • Haeme Ulrich

    Yes, thank you! I will blog about this great stuff here! See (German): http://www.ulrich-media.ch/blog/

  • Chris Becker

    Do you know if there’s a way to determine if the viewer is using a tablet or mobile device as compared to a desktop? So that the parallax will work if it’s using the excellerator or a mouse. Perhaps by using some kind of “if” statement in the code?

    • http://tricedesigns.com/ Andrew Trice

      Yes. You could use JS to detect if device motion/orientation events are supported – I know the Modernizr library already supports this. If device motion events aren’t supported, use mouse interactions. Or, you could just use mouse events, which you could block by intercepting touch events.

  • Sam Totman

    Great tutorial and project file was a big help as well. This was just what I was looking for. Is it necessary to disable the touch commands? I used this technique for a cover page of a folio, but at a lost as to how to get my users from the cover page to the next article without a swipe gesture. I tried a button but no luck. I’m sure its an easy fix but for the life of me I’m not having any success. Thanks

  • caffeineandpixels

    I render all of my frames for 3d lenticular projects out of After Effects. Can this work with individual frames, or an animated gif? This would be a great way to soft-proof lenticular. An app would be very useful. Each of my layers have displacement maps applied, so they’re not just cookie cut outs stepped in space. They actually have volume. Like this… http://farm8.staticflickr.com/7164/6674130833_ae437d2690_o.gif

    • http://tricedesigns.com/ Andrew Trice

      You could create an image sequence on the timeline (each frame has a different image), and scrub through the sequence using the JS device motion events, similar to what’s done in this example. Though, this would be pretty heavy on file size. If it can be broken into layers and use the layered technique it would be lighter, but that’s not always an option. Standard image sequences in InDesign/DPS don’t support device motion, and you can’t scrub through the frames of a GIF.

      • caffeineandpixels

        Not sure what you mean. As I said, I’m not a programmer so code is foreign to me. Also not sure why you’d use a page layout program like Indesign when you have After Effects. When I create DVD covers I have every element on a separate layer (sometimes hundreds of layers) with extra image n the sides for the 3d offsetting. Individual layers can have depth maps applied, which is great for selling the 3d look. Out of After Effects you can render individual frames or a Quicktime. I normally render frames, bring them into PS and layer it out to create the animated gifs to show customers before going to a hard proof. Any way you could create a Photoshop Action or droplet or something to make it more like an app so non-programmers could do this easier? It’s a fantastic idea and I see a lot of potential use for it. I’d pay for an App that did it. http://farm3.staticflickr.com/2007/2214468307_3d243a5547_o.gif

        • http://tricedesigns.com/ Andrew Trice

          OK… I thought you meant for use in DPS, since that’s what I originally had posted about. This won’t work inside a GIF, as there is no API. However, you can take those frames and put them into an animation composition using Edge Animate, so it would work in HTML using the device motion JavaScript APIs. Let me put together a sample, and I’ll post back later.

  • benedikt sk

    hello,
    thank you for the tut, that is awsome. I have one question,
    does it also work in retina, because when i try to integrate the retina
    dimension oam file into a retina indesign file it only displays the
    animation in the wrong scale, only the upper right part of the
    animation.
    My next question is, if its possible to autoplay this animation, so that you dont have to click before the parralex starts?

    And is it possible to swipe down to the next page?

    I would really apppreciate your answer. Thank you very very much.

  • crom

    hi,
    is very good, i test your exemple,on my ipad mini but i note work in full screen
    how make full screen please ?

  • crom

    hi,
    it’s very fantastic , i try it, but i don’t know how to make full screen on mini ipad to look exemple.

  • crom

    how to make exmple on full screen, please on ipad mini.