Boom! Explosionen im Webdesign untersuchen

Es gibt viele Möglichkeiten, die Aufmerksamkeit des Publikums zu gewinnen. Wir haben die Qual der Wahl, auch wenn der aktuelle Stand der Technik noch unvollkommen ist. Wir haben einige Probleme mit der Browserkompatibilität, und nicht jedes Gerät kann mit all diesen grandiosen Lösungen umgehen, die Webentwickler zu uns bringen.

Nichtsdestotrotz sind die Zeiten statischer Websites, in denen Bilder die Hauptantriebskraft und Slider mit ausgefallenen Übergängen die einzige Würze waren, vorbei. Wir erleben eine Ära mutiger Ideen und Extravaganzen.

Einer der größten Aspekte ist, dass Entwickler ihren Fokus nicht auf große Dinge beschränken. Ja, wir sehen zahlreiche Leinwandanimationen, überwältigende VR- und Videoexperimente, die einen Vollbildmodus erfordern usw. Allerdings erhalten heute selbst die kleinsten Details ihre eigene Aufmerksamkeit.

Auf Websites wimmelt es nur so von mikroskopischen Lösungen, insbesondere solchen, die auf dem Mauszeiger basieren. Wir können auf zahlreiche intelligente Ideen stoßen. Sie sind fantastisch, aber in den meisten Fällen sind sie (was ist das Wort, nach dem ich suche?) „leise“. Ich spreche nicht davon, dass sie Geräusche machen, da einige der mausbasierten Lösungen tatsächlich Geräusche machen. Ich rede von ihrem Verhalten.

Ihr Verhalten ist sanft, ruhig und sanft. In einigen Fällen ist es so nahtlos, dass es kaum wahrnehmbar ist. Und wenn Sie sich zu sehr mit dem Inhalt beschäftigen oder andere ablenkende Elemente vorhanden sind, besteht die Möglichkeit, dass Sie sie sogar übersehen. Warum sie also nicht etwas „lauter“ machen, damit die Benutzer keine Gelegenheit verpassen, sie zu genießen?

Wie das geht, fragen Sie sich vielleicht. Ich habe eine gute Lösung: Dinge explodieren lassen – wörtlich und im übertragenen Sinne.

Teilchen im Weltraum von Dean Wagman

Nehmen Sie zum Beispiel dieses fantastische Code-Snippet, das von Dean Wagman erstellt wurde. Obwohl dies das erste von Dean durchgeführte Leinwandexperiment ist, ist es dennoch sehr inspirierend. Alles, was Sie tun müssen, ist, irgendwo auf den Bildschirm zu klicken, und Sie werden eine Explosion von Hunderten kleiner, heller Partikel sehen, die direkt auf Ihr Gesicht zufliegen. Auch wenn es kein Geräusch macht, fühlt es sich auf jeden Fall turbulent an.

Siehe den Stift
Teilchen im Weltraum von Dean Wagman (@deanwagman).

Explosionseffekte erwecken immer das Gefühl, dass etwas Lautes passiert ist. Warum also nicht dies zu unserem Vorteil nutzen und etwas Lärm hinzufügen, ohne einen tatsächlichen Klang zu erzeugen? Umso mehr haben wir hier eine Auswahl an fantastischen Codeschnipseln. Lassen Sie uns sie gemeinsam erkunden.

Teilchenexplosion von Aleksei / Kaboomerz von Christopher Lis

Wenn die Lösung von Dean Wagman etwas zu viel aussieht, können Sie immer noch Particle Explosion von Aleksei ausprobieren. Oder wenn Sie im Gegenteil eine größere Wirkung erzielen möchten, können Sie jederzeit Kaboomerz von Christopher Lis übernehmen.

Das erste Code-Snippet zeigt eine „kleine Bruder“-Version von Deans Explosion, bei der Dutzende winziger Partikel eine kleine Explosion bilden, die schnell erscheint und stirbt. Im Fall von Christopher Lis werden Sie von der Größe der Partikel überrascht sein. Das Konfetti, das aus dem Mauszeiger kommt, ist enorm groß. Dank ihrer kurzen Lebensdauer ist die Gesamtwirkung jedoch nicht überwältigend. Es ist einfach erfreulich.

Siehe den Stift
Partikelexplosion JS/CSS3 von Aleksei (@alek).

Siehe den Stift
#Codevember 5 – Kaboomerz von Christopher Lis (@chriscourses).

DOM-Explosionen von David A.

Wenn Ihnen diese Idee gefällt, Sie aber etwas Digitaleres und Retroinspiriertes brauchen, dann gibt es eine erstaunliche Lösung von David. Er verwendet Rechtecke in verschiedenen Größen anstelle von Kreisen, um einen schönen 8-Bit-Touch zu erzielen. Als Ergebnis können wir Zeuge einer kleinen Explosion mit 80er-Charisma werden.

Siehe den Stift
DOM-Explosionen von David A. (@meodai).

WebGL Sparkles von CreateJS

Wenn Sie nach einer realistischen Version suchen, ist WebGL Sparkles von CreateJS ein perfektes Beispiel. Auch wenn hier alle Partikel weiß sind, sieht es dank des durchdachten Verhaltens aus, wenn man auf den Bildschirm klickt, wie echtes Jubelfeuer. Darüber hinaus hat der Cursor eine schöne Spur, die der Szene einen Hauch von Magie verleiht.

Siehe den Stift
CreateJS: WebGL Sparkles von CreateJS (@createjs).

Automatischer Feuerwerkswerfer von Christopher Lis

Apropos, unsere Sammlung von Explosionen ist ohne eine Dosis Pyrotechnik-Wahnsinn nicht vollständig. Automatic Firework Launcher von Christopher Lis ist ein fantastisches Beispiel. Es ist ein karikaturistischer Feuerwerkswerfer. Dank bunter Partikel und nelkenartiger Formen erinnert es uns an echte Feuerwerke, die den Sternenhimmel zum Leuchten bringen.

Siehe den Stift
Tag 29 – Automatischer Feuerwerkswerfer von Christopher Lis (@chriscourses).

Modales Fensterzerstörungskonzept von LegoMushroom

Canvas-Experimente sind nicht die einzigen in unserer Liste. Explosionseffekte können auf verschiedene Elemente der Benutzeroberfläche angewendet werden, wie z. B. ein modales Fenster. LegoMushroom hat dafür einen anschaulichen Beweis. Werfen Sie einen Blick auf ihr modales Fensterkonzept. Wenn Sie das Fenster schließen, verschwindet es nicht einfach, sondern zerbricht in mehrere Teile. Es ist eine perfekte Ergänzung zu all den ausgefallenen, vollständig illustrierten Websites, die heutzutage sehr beliebt sind.

Siehe den Stift
Konzept der modalen Fensterzerstörung von LegoMushroom (@sol0mka).

SCSS-Explosionseffekt von Sylvain Garnot / SVG-Textexplosion von Kacper Bawol / Canvas-Textexplosion von Tim Horwood

Explosionseffekte können auch für die Typografie von Vorteil sein. Betrachten Sie den SCSS-Explosionseffekt von Sylvain Garnot, die SVG-Textexplosion von Kacper Bawol und die Canvas-Textexplosion von Tim Horwood.

Alle drei zeigen einen auf den Text angewendeten Explosionseffekt. Wie vorhersehbar, löst der Mauszeiger jeden aus.

Sylvain Garnot lässt Benutzer jeden Buchstaben in hundert kleine Quadrate aufblasen. Das Konzept von Kacper Bawol sieht fast genauso aus, doch diesmal zerfällt das Symbol in kleine Dreiecke. Und Tim Horwood ermöglicht es Benutzern, den gesamten Text in winzige Partikel zu zerlegen, die schließlich zurückkommen und alles in seinen ursprünglichen Zustand zurückversetzen. Alle drei Ideen sind einfach unglaublich.

Siehe den Stift
SCSS – Explosionseffekt von Sylvain Garnot (@sylvaingarnot).

Siehe den Stift
SVG-Textexplosion von Kacper Bawol (@Casperovic).

Siehe den Stift
Leinwandtextexplosion, zum Anzeigen klicken von Tim Horwood (@tdhorwood).

Hausexplosion von Ko.Yelie

Der Explosionseffekt kann auch auf Bilder angewendet werden. Dieses Konzept von Ko.Yelie ist ein großartiges Beispiel. Indem Sie auf das Bild klicken, blasen Sie es in winzige Stücke auf. Obwohl es schwierig ist, eine Anwendung dafür in realen Schnittstellen zu finden, ist es immer großartig, einige außergewöhnliche Lösungen zur Hand zu haben, die gewöhnliche Dinge einzigartig aussehen lassen.

Siehe den Stift
Hausexplosion von Ko.Yelie (@ko-yelie).

Ein explosives Feature

Ein Explosionseffekt ist ein umstrittenes Werkzeug. Es ist aufgrund seiner „explosiven“ Natur und seiner starken Ausstrahlung nicht für jede Schnittstelle da draußen geeignet. Obwohl es harmlos und sogar neutral erscheint, wenn es zusammen mit dem Mauszeiger angewendet wird, ist es ziemlich „laut“ – also müssen Sie vorsichtig sein.

Denken Sie daran, dass nicht alle Menschen Unterhaltung auf Websites suchen. Und nicht jeder steht auf Extravaganzen und überwältigende Eindrücke. Am Ende bleibt der Inhalt immer König.

Wenn Sie jedoch nach ungewöhnlichen Wegen suchen, um eine aufregende Benutzerinteraktion zu ermöglichen, die spielerisch und sozusagen „laut“ ist, kann ein Explosionseffekt zweifellos nützlich sein.