Support for mobile/touch screens

[sandman21]

Hi there,

This plugin rocks it fixed the issue I was having with lagging parallax in chrome perfectly.

The only thing I can't figure out is how to get the images to scroll with the text when on a phone or tablet i.e. disable the parallax. I saw that you had planned on adding support for this. Using it now on my mobile device it is very buggy.

Thank you, Matt

[ziad-saab]

Hi @sandman21 ! Thanks for the compliment :)

Mobile devices try to conserve battery charge as much as possible. One of the things that mobile browsers do to achieve that is only send a scroll event after the touch scrolling has completed. On desktop, the scroll events are more granular.

Scroll events are what make this library work. Every time there's a tiny amount of scroll, the library adjusts the position of the background in order to give the parallax effect.

To achieve the same thing on mobile, one has to use a special library that will override the native scrolling in favour of its own touch-scrolling detection. While this is possible on a case-by-case basis, I have yet to find a good way to make it work in the context of a generic library like this one.

Yet another option would be the CSS-only parallax by Keith Clark. Again, I haven't found a way to make a generic library out of this technique.

If you have any suggestions on a way to implement either of these techniques I'd love to hear them. Meanwhile, what I do is simply not use parallax on touch devices. I use Modernizr to achieve that:

if (!Modernizr.touch) {
  $('...').parallax();
}