How to build parallax scroll on an iOS device

Question

Today I saw the most amazing ipad app that I was assured was written using html5, css3 and javascript... the best part of the app was they had perfectly created a parallax scroll... My question is... how?... I can not find any documentation on it being possible to create a parallax scroll on iOS devises... if someone could give me a link or any advise on how to do this that would be most appreciated... anyone?... kind regards J

Answer 1

We recently released a site which does parallax scrolling on iPad. There is a bit of an explanation, and a video of it in use here: http://www.aerian.com/portfolio/one-potato/one-potato-html5-website

and the site itself if you have an iPad to play with:

• http://one-potato.co.uk

To do this, we have written some JavaScript library code which we are looking to open-source in the near future.

The basic idea is to write a scroll container that accepts touch input and tracks your x and y positions (if you need two dimensions) of your content. To make this parallax-able, we found the best way is to use delegation to a controller of sorts. I can't remember the exact syntax we used without looking

container.on('touchmove', function(e) {
    //get our offset
    var offset = <some value>; //e.g. { x : 0, y : -1300 }
    var easing = 'ease-out';

    self.delegate.scrollViewDidScrollToOffsetWithAnimation(self, offset, easing);
});

Then in the Controller, something like this:

var scrollView = new ScrollView($('#container'));

var controller = {
    scrollViewDidScrollToOffsetWithAnimation : function(scrollView, offset, easing) {
        //here you need to respond to offset, by changing some css properties of your parallax elements:
        parallaxElement.css('transform', 'translate(-offset.x, -offset.y * 0.8)');
        anotherParallaxElement.css('transform', 'translate(-offset.x, -offset.y * 0.1)');
    }
}

scrollView.setDelegate(controller);

This delegate pattern is heavily influenced by UIKit as I feel it provides a cleaner way of informing disparate parts of a system of another's events. I find using too much event dispatching becomes hard to maintain, but that's anther story altogether.

Hope this helps a bit.