Wie funktioniert diese Webseite?
Hi,
Ich habe vor kurzem diese Webseite gesehen und komme vom staunen nicht mehr weg. https://albinotonnina.com
Wie funktioniert das? Ist das mit ScrollMagic gemacht und dann einfach ganz viele Bilder die dann eine Art Daumen-Kino erstellen oder wie ist das gemacht?
Liebe Grüße
3 Antworten
Diese Art Storytelling setzt auf dem Parallax Scrolling-Effekt auf, der durch eine optische Täuchung entsteht. Man unterteilt in (mindestens) zwei Ebenen (Vordergrund/Fixpunkt und Hintergrund), die sich beim Scrollen (oder manchmal auch automatisch) unterschiedlich schnell (und vielleicht auch in gegensätzliche Richtungen) bewegen.
Auf diese Weise erzeugt man einen Tiefeneffekt, den man vom echten Leben kennt. Für einen Beobachter nahe Objekte (bzw. deren Lichtreflexionen) werden vom Auge früher erfasst, als weit entfernte Objekte. So kann das Gesehene räumlich eingeordnet werden.
Ebenso entsteht beim Parallax Scrolling das Gefühl einer Bewegung.
Ziemlich gut kann man das bei der Webseite in der Szenerie mit dem roten Stuhl im blauen Zimmer (mit rotem Sofa, Notebook und Couchtisch) sehen, wenn das Tageslicht langsam verschwindet. Oder bei der Ballonfahrt: Die Hintergrundebene (Skyline) bewegt sich schneller / in größeren Schritten als der Ballon. Dennoch wird das Gefühl vermittelt, dass vom Ballon die hauptsächliche Bewegung ausgehen würde.
Zu der Umsetzung: Die Zeichnungen werden mit SVG-Elementen vorgenommen. SVG ist an der Stelle vorteilhaft, denn es ist skalierbar, es stellt entsprechende Elemente zum Zeichnen zur Verfügung (Circle, Rectangle, Path, ...) und es ist vor allem durch JavaScript und CSS manipulierbar. Mit jeder Scrollposition werden Elemente ein/ausgeblendet oder verändert. Zum Beispiel wird bei der Ballonfahrt die Skyline immer weiter nach rechts verschoben.
Vor ungefähr 7-8 Jahren war es ein neuer Trend, mit Parallax Scrolling One-Pager zu erstellen und auf diese Weise Geschichten zu erzählen. Da gibt/gab es noch so einige wirklich schöne/kreative Exemplare. Zum Beispiel von einem Schuhhersteller, der dir beim Scrollen die Produktion eines Schuhs Schritt für Schritt gezeigt hat, eine audiovisuelle Darstellung einer Geschichte um ein Boot im Meeressturm oder eine Statistikpräsentation zum täglichen Wasserverbrauchs eines Durchschnittsbürgers.
Mittlerweile ist diese Popularität um diesen Effekt jedoch wieder abgeflaut und Webseiten, die ihn einmal genutzt haben, sind nicht mehr erreichbar oder haben sich im Aufbau wieder gewandelt. Am ehesten wirst du bei Portfolios (z.B. eines Web-/Designers) oder Kampagnenseiten noch darauf stoßen.
Hier findest du noch einen Blogartikel von Rachel Nabors: How They Did It: Alice in Videoland. Sie hat es sich damals zum Ziel gemacht, Alice in Wonderland visuell auf einer Webseite zu erzählen und hat dabei auch Parallax Scrolling als Stilmittel eingesetzt. In dem Artikel erzählt sie etwas über die Planung und Umsetzung des Projekts. Zudem findest du dort Verlinkungen zu dem Projekt auf GitHub.
es gibt Frameworks welche den Content unabhänig verändern, je nachdem wie weit man scrollt.
Der Sourcecode der Seite ist ja vorhanden: https://github.com/albinotonnina/albinotonnina.com/
nein Kein Video keine Bilder. Es sind einzlene Elemente bestehend aus Bildern, Text und einfach farbigen Formen, welche per CSS mithilfe eines Frameworks verschoben und resized werden.
Du kannst auf der Webseite den Element-Editor auf machen, dann siehst du alle Elemente...
Ja, es funktioniert wie ein Daumenkino. Wenn du eine gewisse Distanz herunterscrollst, wird der nächste Frame angezeigt. Auf der Apple Website ist das genauso
aber sind das einfach 1000 Bilder die er alle einzeln gemacht hat?
Die Animation hat er wahrscheinlich am Computer gemacht. Es ist relativ einfach, diese statt als Video, Frame für Frame zu exportieren, das ist kein großer Aufwand
Also ist es ein Video das er dann Bild per Bild exportiert hat und so eingefügt hat. Mit ScrollMagic dann sobald man Scrollt ein Bild aublenden und das andere einblenden lassen. Verstehe ich das richtig?
Nein so funktioniert es definitiv nicht!
Bitte den Sourcecode der Webseite ansehen bevor man wilde Behauptungen aufstellt. Das sind KEINE Frame Bilder.
Oh, das tut mir leid, ich kannte das bisher von einigen anderen Websites, deshalb habe ich mir den Sourcecode nicht angeschaut.
Alles gut, aber das 1000 Frames als Vollbilder geladen werden macht keinen Sinn, Die Ladezeiten und der Traffic wären viel zu hoch und es ist extrem ineffizient.
Die Bechenungen und Animationen werden direkt live vom Browser berechnet, nichts fertig gerendertes.
Also ein Video das abgespielt wird wenn man weiter scrollt oder ist das was anderes ?