Angriff der Blob-basierten animierten Hintergründe im Webdesign

Animierte Hintergründe sind ein beliebtes Feature moderner Websites. Es ist kein Trend oder etwas Außergewöhnliches mehr. Es ist heutzutage nur eine der praktikablen Möglichkeiten, einen Heldenbereich zu schmücken. Obwohl es immer noch ein Problem mit der Browserkompatibilität gibt, hat sich die Lösung eine Nische geschaffen.

Es gibt verschiedene Arten von Animationen. Sie können stolpern über:

• Partikelanimationen;
• Kaleidoskopische Animationen;
• Abstrakte 3D-Animationen;
• Reibungslose geometrische Animationen und vieles mehr.

Während vor einigen Jahren von Sternbildern inspirierte Partikelanimationen das Sagen hatten, erregen heutzutage blobförmige Animationen die Köpfe von Kreativteams. Was kannst du tun? Das flüssige Verhalten ist unwiderstehlich. Die Morphing-Routine, die zeigt, wie sich ein großer Tropfen reibungslos im Raum bewegt, überzeugt das Online-Publikum und bringt Ihre Website an die Spitze.

Um von dieser Mainstream-Technik zu profitieren, bieten wir Ihnen eine Sammlung hervorragender Codeschnipsel, die Ihnen einen Hinweis geben, wie Sie Ihre eigene blobförmige Animation erstellen können. Sie können dies entweder mit traditionellen oder brandneuen Tools tun. Lassen Sie uns jetzt die perfekte Ergänzung für Ihr nächstes Projekt finden.

Blob-Animation von Uwe Chardon

Uwe Chardons Interpretation dieser beliebten Lösung ist praktisch und inspirierend. Es verfügt über einen einfachen, flachen Blob mit einer schönen orangefarbenen Färbung und glatten Kanten, die in einer sauberen Umgebung platziert sind. Er schaffte es ziemlich gut, das Flüssigkeitsverhalten zu imitieren.

Das Ergebnis ist eine gelungene Kombination aus einfacher Form und kompliziertem Verhalten, die ziemlich beeindruckend aussieht.

Sehen Sie sich die reine CSS-Animation Pen Blob von Uwe Chardon an

Blob von Ashton Holgate

Das vorherige Beispiel zeigt eine traditionelle Art von Blob mit unregelmäßiger Form und relativ ausdrucksstarkem Morphing. Dieses Projekt von Ashton Holgate hält sich jedoch an eine göttlichere Form, die fast an den Kreis grenzt, und Änderungen sind kaum wahrnehmbar. Trotzdem sieht es auch hervorragend aus.

Umso mehr hat der Künstler auch mit dem Text gespielt und ihn gezwungen, seine Farbe in die entgegengesetzte zu ändern, wenn er auf den Bereich der Blase trifft.

Siehe Pen Blob von Ashton Holgate

Bouncing Liquid Loader von Fabio Ottaviani

Fabio Ottaviani hat die spielerische Natur des klebrigen Verhaltens in die Praxis umgesetzt, die Blob-Animationen innewohnt. Seine Blase ist klein, aber sie erzeugt mit ihrem entzückenden Morphing und lustigen Hüpfen eine ziemliche Wirkung.

Obwohl auf dem Namensschild des Stiftprojekts „Loader“ steht, lässt es sich leicht in ein dekoratives Detail des Hintergrunds verwandeln. Und dazu müssen Sie nur HTML und CSS beherrschen, denn der Künstler verwendet keinerlei JavaScript-Magie. Clever.

Sehen Sie sich den Pen Bouncing Liquid Loader von Fabio Ottaviani an

Canvas Blob Test von Shaw

Im Gegensatz zum vorherigen Beispiel wird dieser Drop rein durch JavaScript generiert. Seien Sie also bereit, in eine aufregende Lösung einzutauchen und kompliziert mit der Grafik zu spielen. Darüber hinaus unterscheidet sich das Konzept von den anderen durch sein primitives Aussehen, zusammen mit einem recht sanften und ruhigen Verhalten, das eine insgesamt ruhige Atmosphäre hervorruft.

Es ist ziemlich universell und neutral. Somit könnte es eine perfekte Hintergrundanimation für zahlreiche Projekte werden.

Siehe Pen-Canvas-Blob-Test von Shaw

Blob von Jeffrey

Diese Lösung von Jeffrey ist eine gelungene Kombination zweier Trends. Hier finden Sie einen fleckigen Hintergrund, der heutzutage sehr beliebt ist, und das flüssige Verhalten, das sich gegenüber den anderen Optionen durchsetzt.

Das Code-Snippet wird mit HTML, CSS und JavaScript erstellt. Es sieht auf verschiedenen Browsern und Geräten konsistent aus. Der Künstler verwendet einen einfachen Federalgorithmus, der die Interaktion mit dem riesigen Blob real und nicht künstlich erscheinen lässt.

Beachten Sie, dass der Fleck, obwohl er die Hälfte der Szene einnimmt, die Zuschauer nicht überwältigt. Hinter dieser Unaufdringlichkeit steht das ruhige, ruhige Verhalten.

Siehe Pen Blob von Jeffrey

Blobs von Charlotte Dann

Wenn ein Klecks nicht ausreicht, um einen richtigen Eindruck zu hinterlassen, können Sie immer noch ein Dutzend davon nehmen. Charlotte Dann zeigt Ihnen mit ihrem genialen Codeschnipsel, wie das geht, ohne die Gesamtwirkung zu ruinieren und die Besucher zu überfordern.

Ihr Codeschnipsel ist einfach ein Augenschmaus. Es verfügt über viele kleine sich bewegende Blobs, die miteinander interagieren. Jeder sieht aus wie ein kleiner Lichtfleck. Zusammen bilden sie einen riesigen Fleck, der an allen Fronten Wärme ausstrahlt.

Siehe die Pen Blobs von Charlotte Dann

Lassen Sie uns nun von der flachen Welt in eine dreidimensionale Welt übergehen.

Blob von Georgi Nikoloff

Blob von Georgi Nikoloff ist ein Point-in-Case. Es fällt sofort mit seiner lebendigen Farbgebung, seinem Hightech-Erscheinungsbild und seinem dynamischen Verhalten ins Auge. Der Entwickler macht das Beste aus den fortschrittlichen Technologien, indem er WebGL, GLSL und Shader zu seinem Vorteil nutzt. Auch wenn die Lösung Browserkompatibilität unterliegt, sieht sie inspirierend aus.

Siehe Pen Blob von Georgi Nikoloff

Experiment Nr. 6 von Daniel Del Core

Daniel Del Core zeigt dem Online-Publikum, wie man mit Simplex-Rauschen spielt und es mit sorgfältig reproduzierten Texturen aufpeppt. Das Ergebnis ist ein von Süßigkeiten inspirierter, farbähnlicher Ball. Obwohl es sich ziemlich schnell bewegt, ist es so faszinierend, dass es schwierig ist, die Augen sofort davon abzuwenden.

Siehe Pen Experiment #6 von Daniel Del Core

Gefälschter Partikelklecks von Eli Fitch

Im Gegensatz zum vorherigen Beispiel, das eine mutige Persönlichkeit und das Charisma eines Popstars aus den Spandex-besessenen 80er Jahren hat, fühlt sich dieses wie ein Ding aus der bescheidenen Techno-Zukunft an. Der Blob besteht aus winzigen Partikeln, die unter bestimmten Winkeln heller werden, um ein 3D-Erscheinungsbild zu erzielen.

Wie vorherzusehen war, setzt der Künstler die Magie von Three.j und einige geniale Arbeiten mit prozeduraler Textur ein, um dieses Konzept umzusetzen.

Sehen Sie sich den gefälschten Partikelklecks Pen #3December von Eli Fitch an

CSS-Blob-Generator von Edwin Chen

Wir beenden unsere Sammlung mit CSS Blob Generator von Edwin Chen. Wie der Titel schon sagt, verfügt dieser Stift über einen kleinen Spielplatz, auf dem Sie eine Blob-Form erstellen können.

Hier finden Sie ein kleines Panel, in dem Sie jeder Grenze einen Radius zuweisen können. Obwohl es statisch und flach ist, können Sie das Ergebnis einfach kopieren und mit Hilfe von JavaScript in Bewegung setzen.

Siehe Pen CSS Blob Generator von Edwin Chen

Die perfekte Form für eine beruhigende Atmosphäre

Es ist nicht verwunderlich, dass die sanfte und ruhige Natur des Flüssigkeitsverhaltens heutzutage immer beliebter wird. Wie ein kleiner hypnotisierender Bach, der durch den Wald fließt, lockt er Sie an und dient als Insel der Ruhe in der sich ständig verändernden Online-Welt.

Die Blob-basierten Animationen sind nur dazu bestimmt, modernen Projekten zugute zu kommen. Sie sind unauffällig, obwohl sie sicherlich Aufmerksamkeit erregen. Ob elegante, flache Umsetzung oder extravagantes 3D, es schafft mühelos eine ruhige Atmosphäre.

Es wird das Erlebnis bereichern, den Hintergrund schmücken und gleichzeitig dem Inhalt Platz machen. Diese Hintergründe helfen Ihnen, das Gleichgewicht zwischen visuellen und textuellen Daten zu halten.