Animierte Hintergründe sind ein beliebtes Merkmal moderner Websites. Es ist kein Trend oder etwas Außergewöhnliches mehr. Dies ist heutzutage nur eine der praktikablen Möglichkeiten, einen Heldenbereich zu dekorieren. Obwohl es immer noch ein Problem mit der Browserkompatibilität gibt, hat die Lösung es geschafft, eine Nische für sich zu finden.
Es gibt verschiedene Arten von Animationen. Sie können stoßen auf:
Während vor einigen Jahren von Konstellationen inspirierte Partikelanimationen den Hühnerstall beherrschten, erregen heute tropfenförmige Animationen den Geist von Kreativteams. Was kannst du tun? Flüssigkeitsverhalten ist unwiderstehlich. Die Transformationsroutine, die zeigt, wie sich ein großer Tropfen reibungslos im Weltraum bewegt, überzeugt das Online-Publikum und bringt Ihre Website an die Spitze.
Um diese konventionelle Technik nutzen zu können, bieten wir Ihnen eine Sammlung herausragender Codefragmente, die Ihnen einen Hinweis geben, wie Sie Ihre eigene Blasenanimation erstellen können. Sie können dies mit traditionellen oder neuen Werkzeugen tun. Lassen Sie uns nun die perfekte Kombination für Ihr nächstes Projekt finden.
Uwe Chardon Blob Animation
Die Uwe Chardon-Version dieser beliebten Lösung ist praktisch und inspirierend. Es verfügt über einen einfachen, flachen Tropfen mit einer schönen orange Farbe und glatten Kanten in einer sauberen Umgebung. Es gelang ihm, das Flüssigkeitsverhalten recht gut nachzuahmen.
Das Ergebnis ist eine gewinnbringende Kombination aus einfacher Form und kompliziertem Verhalten, die sehr beeindruckend aussieht.
Sehen Sie sich Uwe Chardons Pen CSS-Animation an
Ashton Holgate Blob
Das obige Beispiel zeigt eine traditionelle Art von Tropfen mit einer unregelmäßigen Form und einer relativ ausdrucksstarken Transformation. Dieses Ashton Holgate-Projekt hält jedoch an einer göttlicheren Form fest, die fast an den Kreis grenzt, und die Änderungen sind kaum spürbar. Es sieht aber auch außergewöhnlich aus.
Darüber hinaus hat der Künstler auch mit dem Text gespielt und ihn gezwungen, seine Farbe in das Gegenteil zu ändern, wenn er den Blasenbereich berührt.
Siehe den Blob Pen von Ashton Holgate
Bouncing Liquid Loader von Fabio Ottaviani
Fabio Ottaviani hat die spielerische Natur des eingängigen Verhaltens, das Blob-Animationen innewohnt, in die Praxis umgesetzt. Seine Blase ist klein, aber es macht einen großen Eindruck mit seiner entzückenden Transformation und dem lustigen Sprung.
Obwohl auf dem Typenschild des Stiftprojekts “Ladegerät” steht, kann es leicht in ein dekoratives Hintergrunddetail umgewandelt werden. Dazu müssen Sie lediglich HTML und CSS kennen, da der Künstler keine JavaScript-Magie verwendet. Intelligent.
Siehe Bounce Boom Liquid Loader von Fabio Ottaviani
Canvas Stain Test von Shaw
Im Gegensatz zum vorherigen Beispiel wird dieser Drop ausschließlich von JavaScript generiert. Machen Sie sich bereit für eine aufregende Lösung und ein kompliziertes Gameplay mit Grafiken. Darüber hinaus unterscheidet sich das Konzept von den anderen durch sein primitives Erscheinungsbild sowie durch ein ziemlich geschmeidiges und ruhiges Verhalten, das eine insgesamt ruhige Atmosphäre erzeugt.
Es ist ziemlich universell und neutral. So könnte es zu einer perfekten Hintergrundanimation für zahlreiche Projekte werden.
Siehe Shaws Canvas Pen Test
Blob von Jeffrey
Diese Jeffrey-Lösung ist eine gewinnbringende Kombination aus zwei Trends. Hier finden Sie einen unebenen Boden, der heutzutage sehr beliebt ist, und das Flüssigkeitsverhalten, das gegenüber den anderen Optionen vorherrscht.
Das Code-Snippet besteht aus HTML, CSS und JavaScript. Es sieht über mehrere Browser und Geräte hinweg konsistent aus. Der Künstler verwendet einen grundlegenden Federalgorithmus, mit dem sich die Interaktion mit der großen Blase real und nicht künstlich anfühlt.
Beachten Sie, dass die Blase zwar die Hälfte der Szene einnimmt, den Betrachter jedoch nicht dominiert. Das geschmeidige und gelassene Auftreten steckt hinter dieser Diskretion.
Schau dir Jeffreys Stift an
Charlotte Danns Blobs
Wenn ein Tropfen nicht ausreicht, um einen korrekten Eindruck zu erzeugen, können Sie immer ein Dutzend davon auswählen. Charlotte Dann zeigt Ihnen mit ihrem raffinierten Code-Snippet, wie es geht, ohne den Gesamteffekt zu ruinieren und die Besucher zu überwältigen.
Sein Code-Snippet ist nur ein Genuss. Es hat viele kleine sich bewegende Blasen, die miteinander interagieren. Jeder sieht aus wie ein kleiner Lichtpunkt. Zusammen bilden sie einen großen Tropfen, der an allen Fronten Wärme ausstrahlt.
Sehen Sie sich Charlotte Danns Pen Blobs an
Wechseln wir nun von der flachen zu einer dreidimensionalen Welt.
Blob von Georgi Nikoloff
Blob von Georgi Nikoloff ist ein Beispiel. Es fällt sofort mit seiner lebendigen Farbe, dem High-Tech-Erscheinungsbild und dem dynamischen Verhalten auf. Der Entwickler nutzt die fortschrittlichen Technologien voll aus und nutzt WebGL, GLSL und Shader zu seinem Vorteil. Obwohl die Lösung der Browserkompatibilität unterliegt, scheint sie inspirierend.
Siehe Georgi Nikoloffs Federklecks
Daniel Del Core Experiment 6
Daniel Del Core zeigt dem Online-Publikum, wie man mit Simplex-Rauschen herumspielt und es mit sorgfältig reproduzierten Texturen repariert. Das Ergebnis ist ein von Süßigkeiten inspirierter Paintball. Obwohl er sich ziemlich schnell bewegt, ist er so faszinierend, dass es schwierig ist, seine Augen sofort abzuwenden.
Siehe Stiftexperiment Nr. 6 von Daniel Del Core
Eli Fitch Fake Partikeltropfen
Im Gegensatz zum vorherigen Beispiel, das eine mutige Persönlichkeit und das Charisma eines von Spandex besessenen Popstars der 80er Jahre hat, fühlt sich dieses wie etwas aus dem bescheidenen zukünftigen Techno an. Der Blob besteht aus kleinen Partikeln, die in einigen Winkeln heller werden, um einen 3D-Look zu erzielen.
Es überrascht nicht, dass der Künstler die Magie von Three.js und geniale prozedurale strukturierte Arbeiten einsetzt, um dieses Konzept umzusetzen.
Siehe Eli Fitch’s Fake Particle Blob Pen # 3December
CSS Blob Generator von Edwin Chen
Wir werden unsere Sammlung mit dem CSS-Blob-Generator von Edwin Chen beenden. Wie der Titel schon sagt, verfügt dieser Kugelschreiber über einen kleinen Spielplatz, auf dem Sie eine Tropfenform erstellen können.
Hier finden Sie ein kleines Feld, in dem Sie jeder Kante einen Radius zuweisen können. Obwohl es statisch und flach ist, können Sie das Ergebnis einfach kopieren und mithilfe von JavaScript in Bewegung setzen.
Siehe Edwin Chens Pen CSS Blob Generator
Die perfekte Form für eine entspannte Umgebung
Es überrascht nicht, dass die glatte, ruhige Natur des Flüssigkeitsverhaltens heutzutage immer beliebter wird. Als faszinierender kleiner Bach, der durch den Wald fließt, zieht er Sie an und dient als Insel der Gelassenheit in der sich ständig verändernden Online-Welt.
Blob-basierte Animationen sollen modernen Projekten zugute kommen. Sie sind diskret, obwohl sie sicherlich Aufmerksamkeit erregen. Egal, ob Sie sich für eine elegante, flache oder extravagante 3D-Realisierung entscheiden, Sie schaffen leicht eine ruhige Atmosphäre.
Es wird die Erfahrung bereichern, den Hintergrund verschönern und gleichzeitig dem Inhalt weichen. Diese Hintergründe helfen Ihnen dabei, das Gleichgewicht zwischen visuellen und Textdaten aufrechtzuerhalten.
