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.

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

Solution 2

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

Solution 3

I've successfully implemented cross device/browser parallax scrolling with the help of the Zynga Scroller js library. It takes care of one of your main concerns which is the interoperability of click and touch events and scrolling on mobile webkit devices – this allows you to manipulate the DOM as you scroll.

Then, to create the parallax effect you have three options:

1. Simulating a real-world 3d parallax by using 3d transforms (with a parent/wrapper element that controls perspective and transform origin).
2. Using a 2d parallax library such as stellar.js or skrollr
3. Building your own parallax scrolling algorithm.

Here's a quick demo (using existing sample code) of option 1 showing how smooth parallax scrolling would work across desktop and mobile devices. Of course, you're limited to devices that have support for 3d transforms. Note that the Zynga Scroller works via click/touch and drag – it should probably not be used as a dekstop solution as the only thing that would be required is overflow: scroll in CSS.

Solution 4

Have a look at the jQuery-Plugin "Scroll Path" http://joelb.me/scrollpath and combine this with different layers and speeds. You will have recognized that the scrolling of the example page is not just a vertical parallax stage but also moves layers horizontally while you scroll up and down. This is possible with Scroll Path.

View more solutions

Comments

[Oleg V. Volkov]

I can't understand why do you expect somebody to say that it shouldn't be possible.

[Polynomial]

+1 just for linking that site. Damn, that's a nice design.

[Jo Sprague]

Basically, you're saying, make it so the page no longer scrolls via the normal browser controls, and then use that JS object to control any "scroll events" with the parallax library? Your answer makes sense, but I think I need a little bit more context to figure out specifically what you're referring to.

[Jo Sprague]

Kind of makes sense. Can you provide a little more detail? I have no idea how I would go about doing this.

[Oleg V. Volkov]

hobberwickey's answer is more detailed. In short, after making page fit entire screen/unscrollable, you can just put all layers in separate <div> each with absolute positioning and then just change top and left properties on timer/event according to parallax calculations.

[Jo Sprague]

So far, this is the best answer. If you complete it, I may award it the full bounty. Otherwise, it'll probably just get half, since it still leaves a lot to figure out.

[hobberwickey]

Here's a working example, it's not real exciting, but it should show you how everything works. jsfiddle.net/rBdY3/14

[hobberwickey]

Oh, and obviously, to add touch support (or keyboard whatever else) you just have to capture those events in the same way I captured the mouse events.

[arttronics]

Your quick demo does not work in current stable builds of Firefox or Chrome.

[Danny Garcia]

@arttronics can you be more specific? Are you trying to use the mouse scroll wheel? The Zynga scroller example would only work via touch (or click) and drag.

[arttronics]

I do not have touch screen monitor on my desktop PC. For the demo, I can grab the text but there is no parallax effect for the red blocks as they just move exactly with the text. However, when I resize the browser window from "horizontally very large" to "horizontally very small" I do see the red boxs animate vertically. To be sure, I clicked/grab via mouse and moving mouse causes text/boxs to scroll vertically together in packed fashion, i.e., no parallax effect.

[matthoiland]

Works perfectly for me in Chrome, Safari, and Mobile Safari. Firefox has issues, but that's to be expected as you're using -webkit vendor prefixes.

[Renan Santos]

@OliverJones First you have to create your parallax for desktop. Here is an extremely simple example: http://jsfiddle.net/renan_santos/cJsHd/

[Renan Santos]

Not a parallax example, just scroll interaction! From $(window).scrollTop() or window.scrollY you get the amount scrolled in pixels and then you can work with this value.

[cockypup]

this works only partially. if the "momentum scrolling" effect is enabled, then it does not fire for the "slowing down" tail of the scrolling, only fires while the user's finger is in contact with the screen.