How can I make a parallax scrolling site that works on iOS and desktop?

Question

Before you say this isn't possible, I know it is. Here's an example: http://victoriabeckham.landrover.com/INT

The main problem is that iOS freezes DOM manipulation on scroll, so you have to use some sort of technique to overcome the problem. The parallax plugin I was hoping to use is stellar.js, but the issue I am running into is that the "iOS demo" for that plugin isn't really usable on a desktop. I fiddled with it for 3 hours this morning, and couldn't get a setup that works correctly on both iOS and desktop.

I need some ideas, either a technique to configure stellar.js to work the same way on both (I'm not sure if that's possible), or another library that works on both, or maybe some insight on how I could program a workaround myself.

Any help is appreciated.

Answer 1

Step 1: Create and object like this

{
startFrameNumber: {
     //first obj
     id: idOfElement
     duration: howeverManyFrames
     startLeft: whatever
     endLeft: whatever
     startTop: stillWhatever
     endTop: whateverAgain
   },

   nextStartFrameNumber: {

   }
}

Step 2: Make the page unscrollable via CSS, ie 100% height and width with and overflow: hidden

Step 3: When the user scrolls (via custom scrollbar, keyboard action, or touch events) advance the animation x frames based on how far they scrolled or whatever. If your animation object you created has a key [frame] then add that to the queue of things that are visible and moving, and move all those things in the queue to their appropriate places and/or remove them from the queue of active objects

That's it. The function for moving things around should be pretty straight forward, except getting the animations smooth will take a little playing around with.

Answer 2

Simply scroll each layer of parallax effect manually and control them yourself without relying on browser's page scrolling.