I got the hang of this, but I notice that ANY sample sit using this does not work on IPad or IPhone. I did a search for the closest updates to either canvas or the JQuery plug in and cannot find anything that will work on those platforms. Desktop versions look great but this is a hard sell to clients who want this in re designed sites but will surely back away once they know it does not work well in IP or IPh.
I definitely wouldn't recommend using parallax scrolling for iOS in first place. There's two things that Safari iOS has that I always get annoyed about:
- no fixed-position background images (by default it reverts to no-repeat background) - floating elements (iFrames, divs) with scrollbars are near impossible to scroll by dragging a scrollbar (you'll have to use two fingers to drag the content)
Although in theory, these things may not have anything to do with the parallax scrolling problems, it does show that mobile just uses different rules when it comes to scrolling.
Instead of trying to make mobile browsing the same experience as desktop (including all bells and whistles), it will save you a lot of headaches, time, tears, band-aids, broken keyboards and yelling if you just try to sell the client that mobile browsing is simply a little different and comes with some restrictions.
Excellent point, I just came across a Wordpress theme that uses parallax scrolling . it displays fone in IPhone but the scrolling effect isn't the same. I have another question regarding parallax scrolling so not to confuse I will start a new thread, thx
Ralphiedee, 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.
For more details, see the Scroll events section of the jQuery mobile site.
You can do it by down loading the smallest touch swipe container on the internet at http://torontographic.wordpress.com/ Parallex scrolling on iOS by me. Thanks
There's a jQuery parallax plugin called Stellar.js which has a demo that works in tandem with Scrollability to achieve a touch-friendly parallax scrolling effect.
That said, that demo also works with click-and-drag in desktop browsers, so you'd probably also want to include some code that checks for touch support and switches between scrolling methods accordingly.
Mark Dalgleish who developped stellar.js explained really well how to achieve this using iScroll.js to simulate an iOS scroll.
Slides here : Your text to link here...
YouTube Your text to link here...
Anybody have any other info on this?
- no fixed-position background images (by default it reverts to no-repeat background)
- floating elements (iFrames, divs) with scrollbars are near impossible to scroll by dragging a scrollbar (you'll have to use two fingers to drag the content)
Although in theory, these things may not have anything to do with the parallax scrolling problems, it does show that mobile just uses different rules when it comes to scrolling.
Instead of trying to make mobile browsing the same experience as desktop (including all bells and whistles), it will save you a lot of headaches, time, tears, band-aids, broken keyboards and yelling if you just try to sell the client that mobile browsing is simply a little different and comes with some restrictions.
RD
For more details, see the Scroll events section of the jQuery mobile site.
Parallex scrolling on iOS by me.
Thanks
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.
If you'd like some help on this, IM me on here.
Cheers,
Tom
Hi hicksyfern, would love to try out your JavaScript lib.
There's a jQuery parallax plugin called Stellar.js which has a demo that works in tandem with Scrollability to achieve a touch-friendly parallax scrolling effect.
That said, that demo also works with click-and-drag in desktop browsers, so you'd probably also want to include some code that checks for touch support and switches between scrolling methods accordingly.
Mark Dalgleish who developped stellar.js explained really well how to achieve this using iScroll.js to simulate an iOS scroll. Slides here : Your text to link here... YouTube Your text to link here...