iOS Parallax in HTML5

With the dawn of iOS 7 I’ve been fascinated by the new parallax effect. It creates a much needed sense of depth to an otherwise flat ecosystem of apps. But what about web apps? What’s stopping web-developers from utilizing the accelerometer to create similar effects for the web? Answer: Nothing! This blog posts explains how to add some parallaxin’ swagger to your mobile web sites.

layeredPhoneFigure 1.1 | Using HTML5 and the accelerometer we can add depth to our websites

What’s in a parallax?

The basic concept behind the parallax is simple – move separate layers of content at varying speeds and Viola, you have a parallax effect!

Desktop example

To illustrate the  idea you can see the effect in action here. Notice how the background and highlight layers move at slightly different rates corresponding to the mouse position.

demo1
Figure 1.2 | Desktop version of the parallax effect

Techie Nuggets

The parallax effect has been around for years, dating back to the early flash days. Unfortunately, not every parallax effect is created equal. At it’s best the effect can feel subtle and buttery smooth. At it’s worst, it feels forced and stuttery. Since we’re building the sample for modern web browseres we can use hardware accelerated properties and the requestAnimationFrame loop to ensure a solid 60fps render speed. For this example, these are the key elements used to achieve 60fps:

  • CSS transforms – Modern web browsers hardware accelerate certain css properties including transforms, animations, and transitions. We use transforms to position the layers to ensure a silky smooth effect.
  • requestAnimationFrame –  Optimizing drawing in a browser can get hairy. Luckily the requestAnimationFrame loop strings concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation. Paul Irish wrote a great post on the topic.
  • TweenLiteTweenLite has become my animation toolkit of choice. If possible, it ensures all animated properties get hardware accelerated. I used it in this sample mostly for syntax convenience.

Working with the Accelerometer in HTML5

To adopt the previous sample to a mobile device is relatively easy. Since we’ve already finessed our animations for hardware acceleration we’re half way there. The last step is replacing the mouse-tracking code with values from the accelerometer.

Device Orientation API

Some mobile devices allow access to various hardware sensors via the web browser. At the moment, the accelerometer and gyroscope are well supported in iOS and Android devices. For this sample we targeted Mobile Safari and Chrome for iOS7.

To access the devices’s accelerometer values we used the DeviceOrientation API. This was the first time I’ve played around with this api, but it turned out to be pretty easy to work with. I won’t go into the details of the Alpha, Beta, Gamma values here, but feel free to read up on them here or see them in action here.

This is the gist of how the code looks

 //check for mobile and accerlerometer support
if(this.isMobile && window.DeviceOrientationEvent) {  

    //wireup the event
    window.addEventListener('deviceorientation', function(eventData){

        //grab the accelerometer values
        this.target.x = eventData.gamma * 2; //exaggerate the effect
        this.target.y = eventData.beta * 3;

    }, false);
}

1.3 | Basic code to wire up access the device accelerometer 

Putting it all together

Once we capture the accelerometer values we use the same logic to offset the UI layers. The final effect can be seen in the video below:

Try it yourself

If you’d like to see the effect in action navigate to the link below in on your device. *Sorry* Android users, we’ll catch you next time :/

demo2
Figure 1.4 | Parallax effect in HTML5 on iOS7

The Fine Print

If you’re interested in using the code or extending the sample for your own needs feel free – no attribution necessary. If you mention this blog or our twitter handles (@truthlabschi @eklimcz) I wouldn’t be mad :).

I’ll be the first to admit the code isn’t exactly bullet-proof. It’s meant to be a proof of concept. *use at your own risk*…you know the drill..

You can download the code from GitHub HERE.

One thought on “iOS Parallax in HTML5

  1. Pingback: Planting Seeds at Truth | Truth Labs Blog

Comments are closed.