Webdesign: Slow-Scrolling-Background-Effekt?
Hallo.
Ich weiß nicht, ob dieser Effekt so heißt, aber ich beschreibe ihn mal:
Rein optisch wirkt es so, als ob im body mehrere Background-Images untereinander angeordnet hinterlegt sind.
Das gesamte Interface scheint dann wie eine Maske über die Backgrounds, also über dem Body zu liegen.
Diese Benutzeroberfläche setzt sich nun aus mehreren Full-Background-Color-Containern zusammen (also wo die Background-Bilder im Body nicht sichtbar sind) und dazwischen sind dann transparente Container mit Content gesetzt, wo die Background-Images aus dem Body(?)-Element zu sehen sind.
Die Benutzeroberflächen-Maske lässt sich mit der Maus in normaler Geschwindigkeit scrollen, während der Hintergrund dadrunter verlangsamt mitscrollt.
Weiß von Euch Designern anhand der Beschreibung, was ich meine oder meinen könnte?
Und wenn ja, wie heißt dieser Effekt richtig und wie macht man diesen?
Geht das nur mit HTML und CSS oder ist das ein JavaScript-Effekt?
Danke schon mal.
1 Antwort
Guten Tag,
den Effekt, den du meinst heißt Parallax-Effect und kann vielseitig sein. Manche Webseiten verwenden es, um beispielsweise eine 3D Darstellung während des Scrollens zu erstellen.
Es kommt auf den Umfang des Effekts an, was für Funktionen dieser haben sollte. Für deinen Fall, kannst du es eventuell auch ohne JavaScript schaffen. Ich hatte den Effekt meine ich schonmal so programmiert, wie du es beschrieben hast, nur weiß ich leider nicht mehr genau, wie ich das damals gemacht habe.
Ich habe auf StackOverflow einen Post gefunden, der dir eventuell dort weiterhelfen könnte:
MfG
Ja. Tatsächlich. Unter Parallax-Scrolling finde ich genau das, was ich suche.
Besten Dank!