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