jQuery parallax tutorial?

jquery parallax

25,633

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

Solution 2

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

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.awwwards.com seems to be overflowing with parallax websites.

Solution 3

A quick google turns up this.

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

Solution 4

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

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

View more solutions

25,633

Author by

green_arrow

Updated on June 02, 2020

Comments

green_arrow almost 4 years

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
Pablo Rincon almost 12 years

Great links, Thx ! Any suggestions on Parallax examples that can be implemented on iPads ?
DBUK almost 12 years

Sadly I don't have an iPad, so parallax on iPad etc is alien to me. Doesn't iOS have an issue with position fixed?
DBUK over 11 years

+1 for tutoring designer, things could definitely get nasty!
green_arrow over 11 years

Hi Fraser, wow how bizarre, I actually came across your plugin the other day :) fab work I have to say and it is exactly what I was looking for in my project. It is much more effective and I actually understand how it's done :)
Fraser over 11 years

Glad it was of help :) I'm going to work on another one this weekend which incorporates sprite animation.
Fraser over 11 years

I've added a new post which expands this to include some nice sprite animation too if you're interested
Kyle Vassella over 7 years

Hey Fraser, my portfolio currently has a pure CSS parallax on the hero image (kylevassella.github.io) but I’m switching to your jQuery strategy. I’d like it to work similar to how it does now, except I want my hero image to scroll down at a slow pace rather than remaining stationary (offset scrolling). I can get the jQuery parallax to happen, but I’m unable to make my ‘portfolio’ section scroll up to cover my hero image. Instead, my ‘Portfolio’ section is hidden directly behind the hero image since they both have position: fixed. Could you tell me how to tweak this to work for me?
Kyle Vassella over 7 years

Nevermind, figured it out. All I needed was to apply one of your classes, lets say ".fish", to my hero. To properly place the portfolio section beneath my hero, it did not require any jQuery or parallax properties - I simply gave the portfolio section the css properties of position: relative and top: 100vh. This pulls the portfolio section down 100% of the viewport height and allows it to set beneath the fixed position hero. Thanks so much for the elegant code.