Möchten Sie einen dramatischen Auftritt machen? Möchten Sie Ihre Besucher aufwärmen, bevor Sie sie mit erstaunlichen Animationen, High-End-Bibliotheksexperimenten oder einfach nur einem cleveren Design begeistern? Dann sollten Sie wahrscheinlich Ihre Augen auf einen Begrüßungsbildschirm richten.
Er stammt aus der Welt der Desktop-Software und hat sich erfolgreich im Webdesign verwurzelt. Es ist schnell, schnell, leicht, relativ einfach und leistungsstark. Wir reden immer darüber, wie die ersten Sekunden einen großen Unterschied machen können. Alles muss von Anfang an perfekt sein. Begrüßungsbildschirme sind eine der Webanwendungskomponenten, die direkt mit dem Erfolg dieser Mission verbunden sind.
Die meisten da draußen glauben, dass der Heldenbereich die Schaffung dieses wertvollen ersten Eindrucks unterstützt. Es gibt jedoch fleißige und gewissenhafte Codekünstler, die es lieben, das i zu punktieren und das t zu kreuzen, weil sie glauben, dass jede Sekunde zählt. Nun, so ist es.
Je früher Sie Ihr Online-Publikum vergrößern, desto besser wird Ihr erster Eindruck. Aus diesem Grund sehen wir auf diesem Gebiet mehrere originelle Lösungen. Tatsächlich und tatsächlich eröffnen sie das Gespräch zwischen der Website und dem Publikum. Und wenn Sie der Meinung sind, dass ein Ladegerät nicht in der Lage ist, Ihre Kreativität zu demonstrieren, haben Begrüßungsbildschirme mit Sicherheit ein gewisses Potenzial.
Nutzen Sie den Vollbildmodus
Mit einer Begrüßungsanimation steht Ihnen der gesamte Bildschirm zur Verfügung, nicht nur ein kleines Element. Sie sind wie das Öffnen von Kreditsequenzen aus Filmen, die der Öffentlichkeit etwas Unglaubliches versprechen und Interesse wecken.
Tedd Arcuri SmokeT
Three.js ist kein guter Begleiter für schnelle und leichte Einführungen, aber in Tedd Arcuris Fall funktioniert es auf jeden Fall. Hier wird der sehr realistische und gekonnt reproduzierte Raucheffekt verwendet, um das Erscheinungsbild des Buchstabens “T” zu verbessern. Letzteres ist hier rein symbolisch, da es leicht in ein Logo, Maskottchen oder einen Titel geändert werden kann.
.
Begrüßungsseite von Timothy Giblin
Die meisten Präsentationsbildschirme gehen Hand in Hand mit der Markenidentität. Zum Beispiel die Splash-Seite von Timothy Giblin. Es ist ein 100% klassischer Präsentationsbildschirm, der eine Markenidentität präsentiert, die mit dem kreativen Denken eines Künstlers angereichert ist. Der Autor zeigt uns, wie man sich an das goldene Medium hält. Das Konzept ist originell und gleichzeitig bescheiden. Entdecken Sie nur ein Logo, aber diese Entdeckung zieht die Aufmerksamkeit auf sich.
Begrüßungsbildschirmanimation von Hitesh Sahu
Dieses Beispiel ist weniger beeindruckend als die Lösung von Timothy Giblin, aber es ist praktischer und kann heutzutage überall gesehen werden. Im Grunde ist es nur eine faule Ladung, die auf die nächste Stufe gebracht wird. Zeigen Sie die Elemente der Homepage nacheinander spielerisch und kreativ auf, wodurch die Dinge viel interessanter werden.
Es gibt einige interessantere Code-Schnipsel. Lassen Sie uns gemeinsam die Sammlung erkunden und die beste Übereinstimmung für Ihr nächstes Projekt finden.
Klassische Lösungen
Möchten Sie auf Ihrem Startbildschirm einen bewährten Ansatz verwenden? Die folgenden Beispiele helfen Ihnen dabei.
Adam Blum Begrüßungsbildschirm
Ein traditioneller Gleiteffekt unterstreicht die Schönheit der Adam Blum-Lösung. Es enthält einen sauberen und reinen Hintergrund und mehrere Schlüsselphrasen, die nacheinander erscheinen. Nutzen Sie die Kraft der Vorfreude – die primitive, aber praktikable Möglichkeit, das Interesse eines Benutzers zu wecken.
Nirajan Play On
Um die obige Lösung etwas interessanter zu gestalten, können Sie Manipulationen mit einem Hintergrund hinzufügen, wie es Niranjan in diesem Stift getan hat. Sein Play On-Projekt bietet wunderschöne gleitende Übergänge zwischen halbtransparenten Overlay-Bildschirmen, die auf den Bildhintergrund angewendet werden. Schön und lustig
Williams ‘My Splash
Williams ‘My Splash ist ein weiteres repräsentatives Beispiel für einen klassischen Begrüßungsbildschirm. Das Konzept besteht aus zwei Phasen. Die Animation enthüllt zunächst die Unterschrift des Autors in einem moderaten und angenehmen Tempo. Dann erscheint ein schwarzer Bildschirm. Dies ist eine elegante, elegante und professionelle Lösung, die sich an zahlreiche Projekte anpasst.
Animierter Begrüßungsbildschirm von Dmytro Lvivsky
Der animierte Begrüßungsbildschirm von Dmytro Lvivsky ist der perfekte Ausgangspunkt, um Ihre eigene Lösung zu erstellen. Die JavaScript-Animation verfügt über mehrere Bildschirme und einen traditionellen Übergang zwischen den einzelnen Bildschirmen. Letzteres basiert auf einem Effekt, bei dem ein Kreis das Spiel leitet.
Siehe Dmytro Lvivskys federanimierter Begrüßungsbildschirm (@UnforbiddenYet) auf CodePen.
Einfaches CSS3-Fading von Giles Papworth
Hier ist eine unglaublich vereinfachte Lösung. Die Routine besteht darin, Textblöcke einzeln anzuzeigen, begleitet von einem traditionellen Fading-Effekt. Es tut jedoch alles, was es sollte. Und vor allem, ohne Ihre wertvollen Ressourcen zu “fressen”, da nur CSS3 verwendet wird. Es ist einfach, elegant, bescheiden und leicht.
Der Humorist
Die folgenden Beispiele zeigen, dass ein Startbildschirm auch verwendet werden kann, um den Ton einer Website von Anfang an festzulegen.
Konsolenladeanimation von Andrew Tunnecliffe
Wenn Sie beispielsweise ein Encoder sind, sorgt die Konsolenladeanimation von Andrew Tunnecliffe für eine angemessene Atmosphäre. Es ist altmodisch, brutal einfach und passt perfekt zu jeder persönlichen Entwickler-Brieftasche.
Falling Numbers von Thibault Jan Beyer
Wenn Sie ein statistikbasiertes oder datengesteuertes Projekt im Auge haben, ist Thibault Jan Beyers Falling Numbers ein guter Anfang für Ihre narrative Erfahrung. Die Animation wird mit absteigenden Zahlen geöffnet, die schließlich auf dem Boden aufschlagen und den Hauptbildschirm öffnen. Es hat einen geometrischen Charme, der mit einigen digitalen Gewürzen angereichert ist.
Zu guter Letzt
Für viele Menschen wird Stan Lee immer “Bruce Lees nerdiger Bruder” sein. Für uns ist er eine Ikone, die hinter einem Universum stand, in dem das Gute über das Böse triumphiert und das für immer in unseren Herzen sein wird.
Matt Feinsteins Marvel Splash Screen
Matt Feinsteins Marvel Splash Screen ist nicht gerade eine Hommage, aber alle Superhelden-Fans werden es genießen. Der Titel spricht für sich. Seine Willkommensanimation hat eine wundervolle Comic-Atmosphäre. Es ist eine Nachbildung einer Eröffnungssequenz für Marvel-Filme, die fantastisch aussieht.
Wie man für Furore sorgt
Begrüßungsbildschirme können als Alternative zu Ladegeräten verwendet werden, es sei denn, sie sind natürlich schwer. Leider gibt es immer noch Leute, die sie zu ernst nehmen und versuchen, sie in einen actionreichen Teil eines Stücks zu verwandeln.
Begrüßungsbildschirme im Webdesign sind effektiv, solange sie schnell, kurz, leicht und direkt auf den Punkt gebracht werden. Natürlich geben sie Ihnen den Vollbildmodus, um Ihr Genie zu zeigen. Trotzdem müssen Sie Ihre ursprüngliche Mission fortsetzen. Es sind Spritzer, die Interesse wecken und den Stab sofort zu einer aufregenderen Lösung machen sollten.
