CODEWITHSUNDEEP
jqueryiphonehtml
jon
jon

Reputation: 1581

How to build parallax scroll on an iOS device

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

Upvotes: 7

Views: 48824

Answers (7)

Greg Tatum
Greg Tatum

Reputation: 1222

This site shows a pretty good example of how parallax style effects can work on the iOs https://victoriabeckham.landrover.com/INT

They are simulating scrolling depending on the type of input you are giving. You're not actually scrolling the page, and then animating the various properties. It's reading in the touch events, mouse wheel, or their custom baked scroll bar and seeing how much you are wanting to scroll. All of the content in the page is in a container. That way when you are doing a touch event, it's just reading how much you are moving on the page.

On top of that they are using an animation loop to make everything move. They are utilizing the window.requestAnimationFrame method in order to optimize the changes in their page so that it works smoothly on the iPad and in the browser. Here is a page with a description of it:

http://paulirish.com/2011/requestanimationframe-for-smart-animating/ The browser can optimize concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation. For example, JS-based animations synchronized with CSS transitions or SVG SMIL. Plus, if you're running the animation loop in a tab that's not visible, the browser won't keep it running, which means less CPU, GPU, and memory usage, leading to much longer battery life.

On top of that they have built a custom keyframe object that will decide on how everything is animated on the page. I'm drooling over this set up. Too bad it's not an open framework. You can set where the effect starts, where it ends, the easing, etc. just in the keyframe object, and their framework will handle all of the rest through the animation loop.

{
    selector: '#outro2 > .content2',
    startAt: outroStart+500,
    endAt: outroStart+1000,
    onEndAnimate:function( anim ) {},
    keyframes: [
        { 
            position: 0,
            properties: {
                "margin-top": 650
            }

        },
        {
            position: 1,
            ease: TWEEN.Easing.Sinusoidal.EaseOut,
            properties: {
                "margin-top": 650
            }
        }
    ]
},

In summary, I believe the combination of custom implemented scrolling, and a custom animation loop using the requestAnimationFrame method get beyond the parallax limitation normally associated with iOS devices.

Upvotes: 5

Tom
Tom

Reputation: 1041

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:

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.

Upvotes: 13

Khoa
Khoa

Reputation: 21

Mark Dalgleish who developed stellar.js explained really well how to achieve this using iScroll.js to simulate an iOS scroll (YouTube video).

Upvotes: 2

user2985924
user2985924

Reputation: 13

I found this site have an article about parallax that work great in ios. But, that only support touch device. This will be great if anybody combine to make it work on both desktop and ios device. http://torontographic.wordpress.com/2012/08/11/so-you-want-parallax-scrolling-in-ios-ipad-and-ipod/

Upvotes: 1

Matt Harley
Matt Harley

Reputation: 358

I've recently checked out Skrollr: http://prinzhorn.github.com/skrollr/

The example works great on iOs and Desktop!

Upvotes: 4

Do Not Track Me
Do Not Track Me

Reputation: 2286

at the moment, it's not possible on iOS devices. iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. so you will get chunky animations at best. don't bother.

Upvotes: 0

Karlgoldstraw
Karlgoldstraw

Reputation: 628

i am also looking into doing this. Check out stellar.js by Mark Dalgeish. It works wonderfully in most situations. If anyone has any other links or info it would be great to hear.

http://markdalgleish.com/projects/stellar.js/demos/ios.html

It uses Scrollability. I'm hoping to get scrollarama to work on an iPad in some way like stellar.js does. Well that's the dream!

Hope this helps your search.

Upvotes: 1

Related Questions