jQuery parallax tutorial? [closed]

Question

I need to use a jquery parallax in a website I am building for a client, I am mainly a back end developer so I'm learning more about front end and jquery etc. I have came across examples such as http://www.nikebetterworld.com/ and tutorials however I am worried about copyright issues so I was wondering if anyone had discovered a reliable and easy tutorial for beginners to create a parallax effect? Thanks

Answer 1

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 2

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.