So you want Parallax Scrolling on iOS iPad, iPhone and iPod

parallaxparallaxSwipe for all touch and web browsers including iOS touch screens.
This week I looked at a jQuery parallax plugin by Jonathan Nicol at f6design. So, I grapped it and then spent hours designing a page to use for an iPad project for a car manufacturer. It worked OK in my browsers and my Android touch pad but not at all on my Apple iPod.

I then Googled the problem and got a link to a forum on css-tricks that explained Apples problems. Next, I saw a link on the forum to a Nike page that said the Nike jumpman23 parallax page actually worked on his iPad. See jumpman23 (really nice effect).

Well, you guessed it: I looked at the Nike source code and saw a billion js files. So, rather then sift through them, I though: ‘Hey, my mouseSwipe plugin (bottom of page) could do it by adding top layers and looping though them setting different speeds per layer.’

My mouseSwipe plugin does not use browser scroll functions, just math to position its swipe page. I then removed the panel swipe code and other features to leave just the swiping code I wrote for the plugin. Next, I only added three lines of code using the jQuery each() and an array to hold the speed of each parallax layers. My CSS file took care of the positioning.

Here’s the Demo: I used the images and layout from f6Design but shrunk them and re-arranged the layout to explain the code better.

And here’s the code in a zip file.

Have fun!
Apple can send me a donation, as I’m still looking for work.

About torontographic

looking for work since 2009
This entry was posted in jQuery mouseSwipe and tagged , , , , . Bookmark the permalink.

2 Responses to So you want Parallax Scrolling on iOS iPad, iPhone and iPod

  1. frank62wp says:

    The demo link is broken.


  2. Pingback: How to build parallax scroll on an iOS device - QuestionFocus

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s