Ich war kürzlich Gastredakteur für eine Ausgabe von Bizarro Devs. Das ist ein großartiger Newsletter! Melden Sie sich unbedingt an! Ich habe viele Links zu Blobs eingefügt. Diese seltsamen, matschigen, zufälligen Formen, die gerade so „in“ sind. Hier sind auch diese Links. Ich bin immer ein Fan davon, das zu veröffentlichen, was ich schreibe ;)
Blobs! Blobs sind angesagt! Blobs sind – äh – ein bisschen bizarr. Ich könnte den ganzen Tag auf einem Design wie diesem Umschlag für einen Jahresbericht von Matt Pamer baden. Ich genieße es, wie sich ein Designtrend wie dieser in Designwerkzeugen manifestiert und auf viele kreative und handwerkliche verschiedene Arten angewendet wird.
Wir könnten mit <svg> beginnen und unseren eigenen Blob mit dem Zeichenstift zeichnen, der so ziemlich in jeder Vektor-Designanwendung Standard ist. Ich bin aber ein Schwindler und würde wahrscheinlich The Noun Project nach einigen Blob-Beispielen durchsuchen und die SVG von dort stehlen. Aber leider gibt es dort nicht viel, zumindest was Blobs angeht.
Gott sei Dank für… (warten Sie)… THE BLOBMAKER
Sobald wir einen Blob haben, ist er geradezu darum gebeten, bewegt zu werden. Monica Dinculescu zeigt, wie das mit reinem CSS und freizügiger Verwendung verschiedener CSS-Transformationen in einer Keyframe-Animation geht.
Siehe den Pen
CSS only morphing blob von Monica Dinculescu (@notwaldorf)
auf CodePen.
Oder wir können eine JavaScript-Bibliothek wie KUTE.js verwenden, um alles morphing-fähig zu machen, wie Heartbeat es hier getan hat.
Siehe den Pen
Morphing shapes with KUTE.js von Heartbeat.UA (@hbagency)
auf CodePen.
Eine Bibliothek wie Greensock könnte beim Bewegen und Verformen der Blobs helfen. Greensock hat sogar ein Plugin, das wahrscheinlich das leistungsfähigste Morphing-Tool überhaupt ist. Dieser Pen verwendet Greensock, fügt aber einige native SVG-Filter hinzu, damit die Blobs zufriedenstellend ineinander übergehen. Wir könnten es den Gooey-Effekt nennen:
Siehe den Pen
SVG blob mask von ATCOM (@Atcom)
auf CodePen.
Bisher haben wir uns nur SVG angesehen, aber schließen Sie <canvas> nicht aus! Liam Egan hat diesen Canvas-basierten Blob geradezu wackelig gemacht.
Siehe den Pen
Blob von Liam Egan (@shubniggurath)
auf CodePen.
Warum nicht ein wenig Physik ins Spiel bringen, wie Schwerkraft, und die Blobs so matschig werden lassen! Hakim El Hattab hat das hier geschafft.
Siehe den Pen
Blob von Hakim El Hattab (@hakimel)
auf CodePen.
Und Blobs müssen nicht allein sein! Blobs, die zusammengedrückt werden, sind wie Flüssigkeit. Sie könnten Gefallen an Peeke Kuepers Artikel Simulating blobs of fluid finden.
Wenn eine ziemlich einfache Blob-ähnliche Form in Ordnung ist, kann man immer auf einfache Border-Radius zurückgreifen. Sicher nicht so flexibel wie SVG, aber auch spaßig zum Spielen.
https://9elements.github.io/fancy-border-radius/
Es wäre schön, wenn Implementierer Benutzereinstellungen wie „reduced motion“ respektieren würden, um diese fantastischen Animationen auszuschalten :)
if (window.matchMedia(‘(prefers-reduced-motion)’).matches) {
// ausschalten
}
„Wir könnten es den Gooey-Effekt nennen“ – das ist definitiv ein Lava-Lampen-Effekt!!!
„Gooey-Effekt“
Sie werden „Metaballs“ genannt, wobei die Oberfläche jedes Objekts in der Nähe seiner Geschwister angepasst wird. Auch als „Isosurface“ bezeichnet.
Wenn Sie die verrückteste Anwendung davon in Aktion sehen möchten, schauen Sie sich an:
https://particle-love.com/
Insbesondere HyperMix
Wurde dies durch die neueste Codepen-Herausforderung zu Blobs inspiriert? Ich bin neugierig, da es perfekt zeitlich abgestimmt zu sein scheint und eines der Beispiele tatsächlich eine Einreichung für die Herausforderung ist.