HTML5 / Javascript, Effet de Parallaxe sur des éléments uniques / div tags?

J'ai créé quelques sites dans le passé avec la scrolldeck.js qui ont la norme en plein écran fond avec une couche ontop et le texte (la norme de défilement parallaxe style) ce n'est pas ce que je suis à la recherche d'.

Im la recherche d'un script ou d'un tutoriel (ou des exemples) pour avoir une seule balise div (image) dans le premier plan animer/déplacer comme vous le faites défiler. Je vais être en utilisant ce sur une page de défilement vertical du site, de sorte que votre défilement je voudrais l'étrange image pour faire défiler à une vitesse différente et ont un début et une position d'arrêt. Je ne veux pas l'ensemble de l'arrière-plan sur la parallaxe.

Merci beaucoup à l'avance

EDIT: Voici une meilleure explication de ce que je cherche:

Image de défilement en bas de page, comme vous le faites défiler jusqu'vous voyez une bouteille c'est flottante (png transparent), vous continuez à faire défiler vers le bas de la lecture de contenu et à un certain point que la bouteille repose bien sur une table (une partie de l'arrière-plan) que vous continuez à faire défiler à ne plus se déplacer.

Assez bien l'objectif est d'avoir des éléments (images) dans des positions prédéterminées (basé sur le défilement) et puis rester sur place une fois qu'ils obtiennent à leur position finale.

EDIT 2: Voici quelques exemples de sites:


http://jessandruss.us/ - ce site est exactement ce que je veux, environ 2/3 de la manière vers le bas à ce point: voir la capture d'écran


http://smokeybones.com/ - le burger assez bien l'effet que je veux, minime, mais il se déplace dans la position que vous faites défiler.

Ok, donc juste pour avoir un fond un peu plus sur ce - que vous avez d'un côté défilement site (j'ai fait ma juste part d'entre eux). Les cris chose la plus évidente est la position:fixe propriété pour votre image de fond, et aussi le background-size:cover propriété - qu'est-ce exactement que vous essayez d'atteindre.
Selon le type d'animation que vous souhaitez, vous pouvez travailler sur le pourcentage de défilement à l'aide de la taille (en px) du document et l'écran pour animer à l'aide de la fin de pourcentage.
Avez-vous quelque chose comme cela à l'esprit? jsfiddle.net/WQcWG Vous pourriez probablement la modifier afin de donner de la fluidité de l'animation.
Rikonator, c'est très proche de ce que je veux, mais je n'ai pas forcément envie à commencer par le haut ou déplacer directement vers le bas. Je serai aussi à l'aide de ce sur un certain nombre d'éléments espérais une méthode plus simple. Je vais avoir un standard de défilement VERTICALE du site, comme votre défilement à travers les pages que je veux l'étrange élément (image) pour lancer le défilement parallaxe de style et de tomber dans une position prédéterminée. Assez bien comme ça jsfiddle posté. Je veux aussi que les éléments éventuellement de les déplacer vers le HAUT, à GAUCHE/à DROITE dans la Position. J'ai ajouté à mon message d'origine-haut, qui explique mieux.
J'ai eu un peu de plaisir avec votre problème. jsfiddle.net/5A37m Le seul moyen que j'ai vu qu'il était possible de faire une barre de défilement, la classe de l'image de défilement. Le problème actuel est avec le préchargement des images, de sorte qu'ils ne prennent pas beaucoup de temps à charger. J'ai essayé de mettre en cache les images, mais jusqu'à présent aucune chance. Peut-être vous pouvez faire de l'expérimentation.

OriginalL'auteur matt | 2012-08-17

  1. 6

    Basé sur votre commentaire but hopefully at a different pace then the actual page scrolls creating a parallax effect. - j'ai essayé de simuler cet effet.

    Fondamentalement, l'objet en mouvement se déplace à la même taux à laquelle la page défile mais couvre une distance différente proportionnelle à la fenêtre d'affichage (zone visible)

    DÉMO ici.

    Note: Utilisez la barre de défilement poignée à la place de la molette de la souris.

    Ok qui fait sens, c'est l'utilisation de parrallax qui, je pense, astuces vos yeux dans les objets d'aller plus lentement. Le truc, c'est que je voudrais sorte de facilité en place, comme l'exemple que j'ai posté ci-dessus (jessandruss.nous), je crois, on y est presque...
    Il serait plus rapide si vous avez essayé un certain assouplissement des bibliothèques que de creuser par le biais de code déjà écrit. Essayez de ceci et ceci.
    c'est super scrollor est exactement ce que im après....merci! malade de quitter ce ouvert pour un autre jour, puis de récompense.
    Il y a un autre badge pour l'attribution de la prime avant que le délai se termine.. 😉 j'ai raté le mien, juste pensé que je vous dis. Sur une note plus sérieuse bien, j'espère que vous avez fait des progrès avec ce que vous essayiez.
    raté, eh bien...la prochaine fois. Je vais commencer ce projet la semaine prochaine et vous tiendrai au courant...vous avez skype, btw?

    OriginalL'auteur Robin Maben

  2. 6

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

    Cette bibliothèque est un javascript natif (pas besoin de jQuery etc.) la parallaxe défilement plugin. Le plugin page d'accueil dispose d'un véritable démonstration de ce que vous cherchez. Dépôt Github est ici.

    OriginalL'auteur Kostia

  3. 1

    vous devriez regarder la source de https://victoriabeckham.landrover.com/INT
    fondamentalement, il est un "joueur" qui gère certaines propriétés css qui donne l'effet de parallaxe que vous voulez atteindre; principalement est pas question de background-position
    alla les éléments qui doivent disposer d'un tel traitement sont dans un

    Oui, c'est bel effet et assez proche de ce que je veux. Question est il y a tellement de code sur ce site, il est difficile de savoir exactement ce dont j'ai besoin. Comme je l'ai dit je cherche pour cet effet: jessandruss.nous - ce site est exactement ce que je veux, environ 2/3 de la manière vers le bas à ce point (voir la capture d'écran: i.imgur.com/cdOA3.jpg)
    ici ther est une bibliothèque qui doit seulement s'adapter frot vos besoins johnpolacek.github.com/superscrollorama gardez à l'esprit que aussi jessandruss.nous a un tas de code qui ne sert pas à vos besoins; quand j'ai fait ce genre de sites, j'ai eu à désosser leur code source et d'écrire un plugin presque à partir de zéro
    c'est assez bien exactement ce que j'espérais quand j'ai créé ce post. Merci! Malade de quitter cette ouverture pour un autre jour.

    OriginalL'auteur user1555320

  4. 0

    Je pense que vous pourriez bénéficier de ce livre: Suralimenté Javascript Graphique il a beaucoup de tutoriels et d'informations utiles. Personnellement, j'ai appris beaucoup de choses. voici un lien vers l'un des exemples tirés de l'ouvrage de mouiller votre appétit ici. et vous pouvez visiter le site web d'auteurs pour des trucs plus cool ici.

    merci, mais im essayant de trouver un tutoriel en ligne, le plus simple sera le mieux donc, je suis l'espoir de trouver un qui est plus basé sur CSS si c'est encore possible. Merci!

    OriginalL'auteur Decker W Brower

  5. 0

    Donner jQuery Transe une chance.. Il y a quelques super simple les démos (pas de documents encore) et il fonctionne même avec les appareils tactiles. Cependant, je n'ai qu'à dire que c'est une première version bêta, donc soyez prudent.

    BTW: Il a seulement 8.682 ko

    OriginalL'auteur yckart