Page Transitions – ein wichtiger Grundbaustein in der User Experience

Los geht es mit der einfachsten Page Transition. Das sind in der Regel einfache Fade-ins oder Fade-outs. Das bedeutet, die angeklickte Unterseite schiebt sich als Layer bspw. von oben nach unten oder von der Seite langsam in das Bild hinein und drückt die bestehende Website hinaus. Das funktioniert mit einer harten oder weichen Kante und erinnert ein wenig an einen Filmschnitt aus einem Siebzigerjahre-Blockbuster. Da bleibt kein Restgefühl, dass irgendetwas nicht lädt oder dass man nicht mehr auf der Website ist. Im Gegenteil, alles ist sichtbar, und wir haben hier einen echten Webdesign-Effekt.

• Code Example Simple Page Transition

Bei der Transforming oder Morphing Transition wird ein SVG-Pfad in einen anderen verwandelt. Der Webentwickler ordnet die einzelnen Elemente auf der Site. Werden diese nun angesteuert, morpht die Site und vermittelt dem User das Gefühl, dass sie sich aus den bestehenden Elementen ganz neu aufbaut bzw. ihr Erscheinungsbild verändert. So erinnert diese Transition stark an Morphing SVG Animation und bietet unterschiedliche Möglichkeiten für innovative und gleitende Übergänge.

• Code Example Morphing Page Transition
• Code Example React Animated Page Transitions
• Code Example Morphing Cassandra Paige
• Code Example Morphing Coulterdesign

Bei dieser Transition schieben sich die Layer ebenfalls von links nach rechts oder oben nach unten ins Bild, doch dieses Mal gibt es keine klare Kante, sondern mehrere, und zwar farblich unterschiedliche Layer, die kurz getaktet hintereinander ins Bild kommen und den neuen Inhalt mit sich führen. Es hakt nicht, es stockt nicht, es gibt keine harten Brüche, sondern es geschieht farbig, schnell und sehr dynamisch.

• Code Example Multi-Layer Page Reveal Effect

Grundlegend wird eine Loading Page Transition Animation genutzt, um Seitenübergänge einzuleiten und dann z. B. mit Fade-in abgeschlossen. Ein Beispiel ist die Old TV Page Transition. Diese Transition erinnert ein wenig an einen alten Fernseher. Wenn man in den Neunzigern zu lange TV geschaut hatte und dann ausschaltete, verkleinerte sich das Bild auf dem Monitor zu einer länglichen Zeile – und genau umgekehrt öffnete sich das Bild auch wieder. In einem anderen Insight stellen wir euch übrigens die besten Ladeanimationen vor.

• Code Example Animated Page Transition
• Code Example Preloader

Diese Form der Page Transition wird mit einer reinen Scroll-Animation ausgelöst und auch als ‚Bildlauf mit Tiefeneffekt‘ bezeichnet. Sie wirkt besonders mit gestochen scharfen Fotos und farbigen Illustrationen. Der User scrollt dafür lediglich mit seiner Mouse, und schon schieben sich die Layer von beiden Seiten ins Bild oder hinaus und geben den Blick auf die neuen Inhalte frei.

• Code Example Scroll Animation

Das modernste Beispiel einer Page Transition, vor allem optisch, ist die Flipversion. Bemerkenswert! Es bedeutet nicht, dass die Website zur Seite weggeschoben wird, sondern sie verkleinert sich im Bruchteil einer Sekunde und dreht sich dann um die eigene Achse. Sie flippt wie ein Coin und präsentiert dann den neuen Inhalt.

• Code Example 3D PageFlip

GSAP ist eine Bibliothek, die Webentwicklern sehr schnelle Animationen ermöglicht. Sie wird verwendet, um den Layer nach oben zu schicken und dann einige wirklich originelle Transition-Effekte zu erzielen, z. B. Kreise, harte Kanten, mehrere Ebenen, durchtrennte Bildschirme, auf denen die Webinhalte dann angeordnet werden.

• Code Examples JavaScript Snippets

Mit diesem Webdesign Effekt wird es ein wenig nass, weil dieser reaktionsschnelle Modulübergang für einige Aufmerksamkeit sorgt. Er wurde mit Lottie-Animationen erstellt, die die Effekte in die Page Transition bringen. Während sich in der Mitte die Bildinhalte öffnen und wie Wasser nach außen verdrängen, kommt der nächste Inhalt als Splish-Splash zum Vorschein. Als würde ein Schwimmer von einem Fünf-Meter-Brett springen.

Dystopien sind je nach gesellschaftlicher Wetterlage wieder angesagt und besitzen zudem etwas Zeitloses. Filme, Serien, Romane und nun auch Website Page Transitions arbeiten mit dem Stil. Vorsicht, diese Page Transition ist nicht für jede Webpräsenz geeignet, aber diese Form kann eine moderne Website rasant in die Zukunft schicken. Mit schräger Schrift, schrillen Farben, simulierten Endzeit-Computercodes und einem schicken Retrodesign. – Muy bien!

Thumbnails fangen den Inhalt von dem, was dahintersteckt, im besten Fall genau ein oder versprechen einiges, damit der User klickt. Mit dieser Thumbnail Page Transition geht das Miniaturbild in ein Manual über. Das vormals kleine Bild inmitten von vielen kleinen Bildern wird plötzlich ziemlich groß, größer als gewohnt, und aus einem unter hundert Bildern wird das nächste Titelbild. – Aus Klein wird Groß.