Question

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 1

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)

DEMO here.

Note: Use the scrollbar handle instead of the mouse wheel.