HTML5 / Javascript Parallax effect for individual div elements / tags?

Question

I created several sites in the past with scrolldeck.js that have a standard full screen background with one ontop layer and text (standard parallax style scroll), this is not what I am looking for.

Im looking for a script or tutorial (or examples) to have one div tag (image) in the foreground of the animation / move as you scroll. I will use this on a web page with vertical scrolling on one page, since your scrolling I would like the odd image to scroll at a different speed and have a start and end position. I don’t want the whole background to be on parallax.

Thanks for the bunch in advance

---

EDIT: Here is a better explanation of what I'm looking for:

The image scrolling around the page, as you scroll, you see that the bottle is floating (transparent png), you continue to scroll down the contents for reading and at a certain moment when the bottle lies well on the table (part of the background), when you keep scrolling it is no longer will move.

Pretty well, the goal is for the elements (images) to move to predetermined positions (based on scrolling), and then remain in place when they reach the final resting position.

---

EDIT 2: Here are some sample sites:

http://jessandruss.us/ - this site does exactly what I want about 2/3 of the way down: see screenshot

http://smokeybones.com/ - a hamburger pretty well makes the effect that I want minimal, but it moves to a 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 imitate this effect.

Basically, a moving object moves with the speed of the same speed at which the page scrolls, but covers a different distance proportional to the viewing area (visible area)

DEMO is here.

Note Use the scroll bar handle instead of the mouse wheel.

Answer 2

http://prinzhorn.github.com/skrollr/

This library is a built-in javascript (jQuery, etc. not required) parallax scroll plugin. On the plugin home page there is an actual demonstration of what you are looking for. Github repo is here .

Answer 3

you should look at the source https://victoriabeckham.landrover.com/INT basically a “player” that handles some css properties that give the parallax effect you want to achieve; mainly, the background position does not matter all the elements that should have such treatment,

Answer 4

I think you would benefit from this book: Javascript pressurized graphics , it has a lot of lessons and useful information. I personally learned a lot. here is a link to one of the examples from the book to wet your appetite here. and you can visit the authors website for more interesting things here.

Answer 5

Give jQuery Transe a chance .. There are some super simple demos (no documentation yet) and it even works with touch devices . However, I have to say that this is an early beta, so be careful.

By the way: he has only 8.682 kb