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:

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:

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

JavaScript to disable touch interactions (prevents touch scrolling):

[js]document.addEventListener(‘touchstart’, function(event){
return false;

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

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

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

var position = 15000 + (delta * 400);
position = Math.floor(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

    • Andrew Trice

      Thanks! the download link should work now.

  • Haeme Ulrich

    Yes, thank you! I will blog about this great stuff here! See (German):

  • 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?

    • 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…

    • 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.

        • 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

    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
    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

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

  • crom

    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.

  • volwin

    Hi Andrew, thanks for this inspiring tutorial. I build a iPad page with it and it works perfect. But I realized, when I turn the iPad from standard landscape orientation to the 180° reversed landscape orientation the animation also runs reversed and that is really killing the 3D effect. Is there any easy solutionfor this problem?

  • volwin

    I accurately used your code and it basically works for both orientation. But elements that move to the right at the 0° orientation, move to the left at the 180° orientation. So is there a way to get elements behave exactly the same way for both orientation seen from viewers perspective?

    • Andrew Trice

      You could get the device orientation in JavaScirpt, and just reverse the motion. You can get device orientation using this API:

      • volwin

        Yes, I understand. As far as I can see, this doesn’t solve the problem of the fact that in the moment the iPad screen content flips to the new orientation, the direction parameters work the wrong way round. But I really don’t want to bother you with this anymore. I try to find a solution and will post it when I have it. Many Thx.

  • Shiggy Diggy

    Hi andrew! Love this tutorial and I plan on using it on my dps school project, I have question thought, will this effect work on the 1st generation iPad?

  • hady

    this really awesome. but i convert some animation to symbol, and it didnt work on ipad orientation. it just play by it self. please help me.. i dont understand script. thanks a lot sir.

  • Ken

    Hey Andrew,
    thank you so much for this tutorial, i really love the effect. Its Amazing.
    Question: The Parallax-Effect works on the Ipad, everything looks nice,
    but i cant swipe to the next site, or put some Content in the
    foreground of the embedded html File in the DPS. How can i add this
    Effect in my Magazin, with the Possibility to swipe to the next site?

    Thank you so much, Greetings from Germany