4 moderne Hintergrundtricks zum Ausprobieren
Es scheint, dass Hintergründe als Bestandteil eines Designs im Schatten liegen; Das stimmt jedoch nicht ganz. In Zeiten, in denen die CSS ihre ersten Schritte zur Eroberung der Welt begann, hatte der Hintergrund bereits die Rolle des dekorativen Hauptelements der Website übernommen.
Heutzutage hat sich die Situation nicht drastisch geändert. In den meisten Fällen dient es als primäre visuelle Triebkraft, die einen wichtigen Beitrag zum allgemeinen Thema leistet.
Traditionell sind Fotos und Videos die erste Wahl für einen Hintergrund. Tatsache ist, dass es sich einfach um übervölkerte Heldenabschnitte handelt: Jede andere Website begrüßt das Online-Publikum entweder mit einem bildbasierten oder einem filmbasierten Hintergrund. Und das macht das Web (und insbesondere Ihre Benutzeroberfläche) ziemlich ähnlich, was zu einer erwarteten Benutzererfahrung führt.
Ein Ausweg ist es, neue Lösungen zu finden, indem man die brandneuen Techniken ausnutzt und mit CSS3, HTML5 und JavaScript experimentiert. Tatsächlich gibt es einen erkennbaren Trend für diese Optionen. Es gibt mindestens vier verschiedene moderne dynamische Hintergründe, die an einem Wettbewerb teilnehmen, um diesen Tag in der Sonne zu gewinnen.
Schauen wir uns sie an:
Partikelanimation
Partikelanimation ist eine der beliebtesten Optionen im Moment. Viele Websites haben diese elegante, von Kosmos inspirierte Lösung erfolgreich übernommen. Es funktioniert gut in Kombination mit einfarbigen Leinwand, Illustration, Vektorzeichnungen und sogar Fotos.
Außerdem variiert die Animation. Es kann ein Bündel von chaotisch bewegten Punkten sein, die über die gesamte Seite verstreut sind, um Sternenhimmel oder Sternenregen zu imitieren, oder eine konstellationsbezogene Lösung, bei der Sie Kreise mit dünnen Linien verbinden können. Und das ist nicht alles; Manchmal ist es mit den Effekten gekoppelt, die durch Mouse-Hover-Ereignisse ausgelöst werden: In diesem Fall können Sie die Partikel wegtreiben, wirbeln sie daraus, hängen sie an den Cursor als eine Spur usw.
Huub ist ein Beispiel für die typische Partikelanimation. Es verfügt über eine saubere, sich bewegende Ansammlung von Punkten, die perfekt zu einer dunklen Färbung und einer Karte auf der Rückseite passt. Verwenden Sie Ihren Mauszeiger, um Spaß zu haben.
Tipp: Wenn Sie sich mit dem dynamischen Header-Hintergrund des Huubs auseinandersetzen wollen, sollten Sie sich das von Dominic Kolbe erstellte Projekt ansehen Maus Parallax Demo . Es sieht fast gleich aus. Aber wenn Sie eine sofortige Lösung benötigen, dann JavaScript-Bibliothek von Vincent Garreau, die aufgerufen wird Teilchen.js ist was du suchst.
Wellen von Partikeln
Während im vorherigen Beispiel der Effekt mit den cleveren Manipulationen mit HTML5 und CSS3 und einer Prise JavaScript-Magie erreicht werden kann, ist dies ein geniales Experiment mit der Three.js-Bibliothek. Mit seinen gewölbten Formen und sanften wellenförmigen Bewegungen erinnert es leicht an kleine Gezeiten. Es erzeugt ein Gefühl von atmender Leinwand. Sie können den Mauszeiger verwenden, um ihn in verschiedene Richtungen zu drehen und sowohl horizontal als auch vertikal zu erkunden.
SturMen hat einen einfachen, raffinierten "Willkommen" -Abschnitt. Es ist minimal, sauber und exquisit. Der Inhalt dringt unauffällig in das Sichtfeld ein, während der pulsierende Hintergrund die richtige Stimmung für das Projekt schafft.
Tipp: Hier finden Sie ein originelles Skript von ThreeJS und seine erfolgreiche Adaption von Deathfang mit einer Demo namens three.js Leinwand - Teilchen - Wellen .
Maus schwebt Parallaxe
Layered Parallax ist ein weiterer wachsender Trend. Zusammen mit Partikelanimation kann es einen dumpfen statischen Hintergrund in eine Komposition mit einem subtilen 3D-Gefühl verwandeln. Das Tolle ist, dass Sie Ihre bevorzugte Bildauswahl nicht aufgeben müssen, verwenden Sie einfach Parallax, um es etwas aufzufrischen.
Es ist ziemlich vorteilhaft, wenn Sie den Titel, das Firmenzeichen, die surreale Szene oder die Illustration beleben müssen. Es eignet sich auch für verschiedene abstrakte Animationen. Ausgelöst durch das Standardmaus-Hover-Ereignis fügt es nicht nur eine weitere Dimension hinzu, sondern ermöglicht den Benutzern auch, mit der Umgebung zu spielen.
Das persönliche Portfolio von Alexandre Rochet hat eine hervorragende Splash-Seite. Nicht nur das Verhalten fällt ins Auge, sondern auch die Maus-Hover-Parallaxe lässt die Buchstaben wechseln.
Tipp: Es gibt zahlreiche Bibliotheken und brauchbare Code-Snippets zum Erzeugen von Parallaxen. Einer der beliebtesten ist ein von Matthew Wagerfield erstelltes Plugin Parallax.js . Allerdings, wenn Sie es in der Praxis sehen müssen, vor allem auf die Typografie angewendet, dann können Sie einen Stift von Frontnerd, die seine Aufnahme auf einem zeigt 3D-Parallaxe an der Maus .
WebGL-Experimente
WebGL-Experimente sind natürlich eine Variante für anspruchsvolle gehärtete Entwickler und Kunden mit einem großzügigen Budget. Sie können brillant, ehrfurchtgebietend und ein bisschen pompös sein. Es ist jeden Cent wert. Es gibt jedoch immer eine Fliege in der Suppe. Mit großer Kraft kommt große Verantwortung, und mit WebGL sollten Sie nie vergessen, wie viele Ressourcen es verbraucht und die vollständige Browser-Kompatibilität fehlt.
Solarin geht es um eine unvergessliche und überwältigende User Experience. Es ist ein 3D-WebGL-Experiment, das reich an zahlreichen aufregenden und innovativen Funktionen ist. Der Kopfhintergrund ist eine riesige futuristische Kugel, die auf den Mauszeiger reagiert und einen gewaltigen Eindruck macht.
Tipp: Während zu imitieren, was Genies in MediaMonks getan haben, ist teuflisch kompliziert, im Web können Sie immer einen Ausgangspunkt finden, der Ihnen zum Nachdenken geben wird. Bedenke die WebGL-API , und dieser Codepen von Yoichi Kobayashi, der ein Projekt mit dem Namen "Die wriggle Kugel" .
Fazit
Während die Verwendung von Bildern und Videos eine bewährte und weniger schmerzhafte Methode ist, den Hintergrund zu verschönern, gibt es noch andere vielversprechende und experimentelle Optionen, die das gewünschte Ergebnis erzielen können. Sich von den Banalitäten fernzuhalten, ist herausfordernd und sogar kostspielig, aber diese Maßnahmen sind gerechtfertigt und ziemlich vernünftig.
Ob es eine einfache, aber elegante Partikelanimation oder ein bemerkenswertes WebGL-Experiment ist, es verleiht einem Kerndetail der Benutzeroberfläche neues Leben und gibt Ihrer Website einen Vorsprung.