Was ist eine Technik, um benutzerdefiniertes Verhalten beim Scrollen in einer Webseite vorzunehmen?

Question

Ich kann keinen Namen für diese Technik noch irgendwelche Lesungen zum Thema finden. Also frage ich hier.

Grundsätzlich gibt es Seiten, die Scrollen Verhalten, das Bilder/oder Teile des Webs in unterschiedlicher Zeit oder Geschwindigkeit bewegt.

Das Beispiel ist http://areyousage.com - die Seite scrollt wie Seiten nach oben drehen.

Ich will keine Antwort, die alles für mich tut, aber bei einem Namen dieser Technik oder einer Reihe von Techniken, so dass ich selbst recherchieren und programmieren könnte.

Art der Richtung für weitere Forschung.

Answer 1

Der grundlegende Mechanismus heißt Parallax Scrolling, bei dem die verschiedenen Elemente des Bild/Text/anderen Layereed-Inhalts mit unterschiedlichen Geschwindigkeiten gescrollt werden, um die Illusion von Tiefenschärfe oder veränderter Wahrnehmung zu erzeugen.

Dies kann auch lose erreicht werden, indem Hintergrundbilder mit unterschiedlichen Z-Indizes gestapelt und mit unterschiedlichen Geschwindigkeiten/Richtungen/Übergängen usw. animiert werden und die Bewegung mit der Mausbewegung oder dem Scrollrad ausgelöst wird.

in teh Beispiel Sie bietet ein Übergang ist, der auf Rolle löst das Bild zu verschieben:

transition-duration: 0ms; transform: translate3d(0px, -316px, 0px); 

Die translate3d Funktion drei Argumente hat - eine für jede Achse, x, y und z

Dieses spezielle Beispiel funktioniert, weil die Höhe des Bildes, das umgewandelt wird, 316px ist. Dies führt dazu, dass es sich beim Scrollen nach oben und außerhalb des Ansichtsfensters bewegt. In Wirklichkeit ist es um die gleiche Höhe nach oben verschoben, so dass es scheint zu verschwinden.

Beachten Sie, dass dies nicht parallax scrolling ist - das ist ein html5/css-Mechanismus, der die Bilder so erscheinen lässt, als bewegten sie sich und enthüllen das nächste Bild im Stapel wie sie es tun.