HTML5 / Javascript Parallax Effect on single elements / div tags?
I have created a few sites in the past with the scrolldeck.js that have the standard full screen background with one layer ontop and text (the standard scroll parallax style) this is not what I am looking for.
Im looking for a script or tutorial (or examples) for having a single div tag (image) in the foreground animate/move as you scroll. I will be using this on a one page vertical scrolling site, so as your scrolling I would like the odd image to scroll in at a different speed and have a start and stop position. I dont want the entire background on parallax.
Thanks a bunch in advance
EDIT: Here is a better explanation of what Im looking for:
Picture scrolling down a page, as you scroll you see a bottle thats floating (transparent png), you continue to scroll down reading content and at a certain point that bottle rests nicely on a table (part of background) as you keep scrolling it will no longer move.
Pretty well the goal is to have elements (images) move into pre-determined positions (based on scrolling) and then stay put once they get to their final resting position.
EDIT 2: Here are some example sites:
http://jessandruss.us/ - this site does exactly what I want about 2/3 of the way down at this point: see screenshot
http://smokeybones.com/ - the burger pretty well does the effect I want, minimal but it moves into position as you scroll.
Answer
Based on your comment but hopefully at a different pace then the actual page scrolls creating a parallax effect. - I tried to simulate that effect.
Basically, the moving object travels at the same rate at which the page scrolls but covers a different distance proportional to the viewport (visible area)
Note: Use the scrollbar handle instead of the mouse wheel.