jQuery parallax tutorial? [closed]

Answer 1

try this too :) really easy to use and customize http://johnpolacek.github.com/scrolldeck.js/

Answer 2

I just finished working on one just jesterday :) you should consider using: http://johnpolacek.github.com/scrolldeck.js/ or http://www.jarallax.com/demo/ (works on android) #its a completely new project so its still being developed

for easily customizable scrollpoints you could use this: http://cssdeck.com/labs/swayiqbq/2 (its quite useful while overriding default scrollpoints(which is from slide to slide in scrolldeck.js))

Not sure if youre working on code only, or youre doin both graphics and code, if its the first scenario, you should tutor your designer about how this thing works in order to really use parallax effect. Also, making everything look as appealing in 1920x1080 as in 1024x768 might be quire challenging in some cases.

Answer 3

A quick google turns up this.

http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

Answer 4

Some tutorials, sorry for any ones previously mentioned in this thread:

• http://www.webdesignshock.com/one-page-website/
• http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/
• http://www.richardshepherd.com/smashing/parallax/background.html
• http://www.franckmaurin.com/the-parallax-effects-with-jquery/
• http://www.davecranwell.com/content/jquery-scroll-parallax-plugin
• http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

Some, possibly, useful plugins that could work well with parallax:

• Load content when inview: https://github.com/protonet/jquery.inview
• Waypoints: http://imakewebthings.com/jquery-waypoints/
• Lateral on-scroll sliding content: http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/
• jQuery delay animations: http://james.padolsey.com/javascript/jquery-delay-plugin/
• scrollTo: http://demos.flesler.com/jquery/scrollTo/
• Scrollpath: http://joelb.me/scrollpath/

I particularly like the inview plugin for triggering CSS3 animations when scrolling into view.

And, some lovely examples of more parallax websites for inspiration and code snooping:

• http://www.mini.jp/event_campaign/big-point/
• http://www.kiinnostus.fi/autokuume/
• http://www.scozzese.com
• https://victoriabeckham.landrover.com/INT
• http://www.ws-interactive.fr/methode/
• http://swag2012.fr/
• http://activatedrinks.com/

http://www.awwwards.com seems to be overflowing with parallax websites.

Answer 5

I'm very late to the party but just to throw another one in there for shameless self promotion :), I put a simple tutorial together a few days ago:

http://blog.fraser-hart.co.uk/jquery-parallax-scrolling/

If you've any questions about anything on there, feel free to pop me a message and I can talk you through anything you are unsure about.

Answer 6

Here i have collected some of the best parallax scrolling tutorials from different websites, you can learn from there. Here's the link http://www.andwecode.com/tutorials/parallax-scrolling-tutorials/