Jquery parallax tutorial?

Question

I need to use jquery parallax on the website that I create for the client, I am mainly a developer, so I am more versed in the interface and jquery, etc. I have come across examples like http://www.nikebetterworld.com/ and tutorials, but I am worried about copyright issues, so I was wondering if anyone had opened a reliable and easy primer to create a parallax effect? Thanks

Answer 1

I'm very late to the party, but just to drop another one 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 have any questions about anything, feel free to write me a message and I can tell you everything you are not sure about.

Answer 2

Some tutorials, sorry for the ones mentioned earlier 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 might work well with parallax:

• Download content on call: https://github.com/protonet/jquery.inview
• Waypoints: http://imakewebthings.com/jquery-waypoints/
• Side rolling content on scroll: 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 especially like the inview plugin to run CSS3 animations when scrolling into a view.

And, some great examples of more parallax sites for inspiration and code tracking:

• 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 crowded with parallax websites.

Answer 3

A quick google calls it.

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

Answer 4

I just finished work on one just yesterday :) you should consider using: http://johnpolacek.github.com/scrolldeck.js/ or http://www.jarallax.com/demo/ (works on android) # completely new project, so it is still being developed

for easily customizable scroll points, you can use this: http://cssdeck.com/labs/swayiqbq/2 (its quite useful when overriding the default scroll points (which comes from the slide to move around scrolldeck.js))

I'm not sure if you work only with code, or you do both graphics and code, if this is the first scenario, you should direct your designer to how this thing works in order to really use the parallax effect. In addition, everything looks just as attractive in 1920x1080, as in 1024x768, it can be complicated in some cases.

Answer 5

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

Answer 6

Here I have compiled some of the best parallax scrolling lessons from various sites, you can learn from there. Here's the link http://www.andwecode.com/tutorials/parallax-scrolling-tutorials/