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

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 2

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 3

A quick google turns up this.

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

Answer 4

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

Answer 5

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 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/