Ich habe ein paar Websites in der Vergangenheit mit der scrolldeck.js erstellt, die den Standard-Vollbild-Hintergrund mit einer Ebene ontop und Text (der Standard-Scroll-Parallax-Stil) das ist nicht das, wonach ich suche.
Ich suche nach einem Skript oder Tutorial (oder Beispielen), um ein einzelnes Div-Tag (Bild) im Vordergrund zu animieren / bewegen, während Sie scrollen. Ich werde dies auf einer vertikalen Seite mit einer Seite verwenden, also möchte ich beim Scrollen das ungerade Bild mit einer anderen Geschwindigkeit scrollen und eine Start- und Stoppposition haben. Ich möchte nicht den gesamten Hintergrund auf Parallax.
Vielen Dank im Voraus
EDIT: Hier ist eine bessere Erklärung für was ich suche:
Bild blättert eine Seite nach unten, während Sie blättern, sehen Sie eine Flasche, die schwebt (transparentes Png), Sie scrollen weiter nach unten, lesen Inhalt und an einem bestimmten Punkt ruht diese Flasche schön auf einem Tisch (Teil des Hintergrunds) Scrollen wird es nicht mehr bewegen.
Ziemlich gut ist das Ziel, Elemente (Bilder) in vorherbestimmte Positionen (basierend auf dem Scrollen) zu bewegen und dann zu bleiben, sobald sie in ihre endgültige Ruheposition gelangen.
EDIT 2: Hier sind einige Beispielseiten:
Ссылка - diese Seite macht genau das, was ich an dieser Stelle ungefähr 2/3 von unten möchte: siehe Screenshot
Ссылка - der Burger macht den Effekt, den ich will, minimal, aber er bewegt sich beim Scrollen in Position.
Basierend auf Ihrem Kommentar but hopefully at a different pace then the actual page scrolls creating a parallax effect. - Ich habe versucht, diesen Effekt zu simulieren.
Grundsätzlich bewegt sich das bewegte Objekt mit der gleichen Rate , bei der die Seite scrollt, aber eine andere Entfernung proportional zum Viewport (sichtbarer Bereich) abdeckt
Hinweis : Verwenden Sie den Bildlaufleistengriff anstelle des Mausrads.
Sie sollten sich die Quelle von Ссылка ansehen Im Grunde ist es ein "Player", der einige CSS-Eigenschaften behandelt, die den Parallax-Effekt ergeben, den Sie erreichen möchten; Hauptsächlich kommt es nicht auf die Hintergrundposition an all die Elemente, die eine solche Behandlung haben sollten, sind in a
Ich denke, dass Sie von diesem Buch profitieren würden: Supercharged Javascript Graphics es hat viele Tutorials und nützliche Informationen . Ich habe viel davon gelernt. hier ist ein Link zu einem der Beispiele aus dem Buch, um Ihren Appetit zu benetzen hier. und Sie können besuchen Die Autoren-Website für weitere coole Sachen hier.
Geben Sie jQuery Transe eine Chance. Es gibt einige sehr einfache Demos (noch keine Dokumentation) und es funktioniert sogar mit Berühren Sie Geräte . Allerdings muss ich sagen, dass es eine frühe Beta-Version ist, also sei vorsichtig.
Übrigens: Es hat nur 8.682 kb
Tags und Links javascript jquery scroll html5 parallax
