Atak animowanego tła opartego na blobach w projektowaniu stron internetowych

Animowane tła to popularna funkcja nowoczesnych stron internetowych. To już nie jest trend ani coś niezwykłego. To tylko jeden z realnych sposobów na ozdobienie obszaru bohatera w dzisiejszych czasach. Chociaż nadal istnieje problem z kompatybilnością przeglądarek, rozwiązanie zdołało znaleźć dla siebie niszę.

Istnieją różne rodzaje animacji. Możesz natknąć się na:

• animacje cząstek;
• animacje kalejdoskopowe;
• Abstrakcyjne animacje 3D;
• Płynne animacje geometryczne i wiele więcej.

Podczas gdy kilka lat temu inspirowane konstelacjami animacje cząsteczkowe królowały na grzędach, dziś animacje w kształcie blobów ekscytują umysły zespołów kreatywnych. Co możesz zrobić? Zachowanie cieczy jest nie do odparcia. Procedura morfingu, która pokazuje, jak duża kropla płynnie porusza się w przestrzeni, łatwo zdobywa publiczność online i stawia Twoją witrynę w czołówce.

Aby skorzystać z tej popularnej techniki, oferujemy kolekcję wyjątkowych fragmentów kodu, które podpowiedzą, jak zbudować własną animację w kształcie bloba. Możesz to zrobić za pomocą tradycyjnych lub zupełnie nowych narzędzi. Teraz znajdźmy idealne dopasowanie do Twojego następnego projektu.

Animacja Blob autorstwa Uwe Chardon

Podejście Uwe Chardona do tego popularnego rozwiązania jest praktyczne i inspirujące. Ma prostą, płaską plamę o pięknym pomarańczowym zabarwieniu i gładkich krawędziach umieszczonych w czystym otoczeniu. Udało mu się całkiem dobrze naśladować płynne zachowanie.

Rezultatem jest zwycięska kombinacja prostego kształtu i skomplikowanego zachowania, która wygląda całkiem imponująco.

Zobacz animację Pen Blob pure CSS autorstwa Uwe Chardon

Blob autorstwa Ashton Holgate

Poprzedni przykład przedstawia tradycyjny rodzaj kropli o nieregularnym kształcie i stosunkowo ekspresyjnym morfingu. Jednak ten projekt Ashtona Holgate'a trzyma się bardziej boskiego kształtu, który niemal graniczy z kołem, a zmiany są ledwo zauważalne. Niemniej jednak również wygląda znakomicie.

Tym bardziej, że artysta również bawił się tekstem, zmuszając go do zmiany koloru na przeciwny, gdy trafi w obszar bańki.

Zobacz kropelkę pióra autorstwa Ashtona Holgate

Bouncing Liquid Loader autorstwa Fabio Ottavianiego

Fabio Ottaviani wcielił w życie zabawny charakter lepkiego zachowania, który jest nieodłączną częścią animacji typu blob. Jego bańka jest mała, ale robi duże wrażenie dzięki uroczemu morfingowi i zabawnemu podskakiwaniu.

Chociaż tabliczka znamionowa projektu pióra brzmi „Ładowarka”, można go łatwo zamienić w dekoracyjny detal tła. Aby to zrobić wszystko, co musisz wiedzieć, to HTML i CSS, ponieważ artysta w ogóle nie używa magii JavaScript. Mądry.

Zobacz ładowarkę do płynów podskakujących piórem autorstwa Fabio Ottavianiego

Test kropel na płótnie autorstwa Shaw

W przeciwieństwie do poprzedniego przykładu, ten spadek jest generowany wyłącznie przez JavaScript. Przygotuj się więc na zagłębienie się w ekscytujące rozwiązanie i skomplikowaną zabawę z grafiką. Co więcej, koncepcja różni się od innych prymitywnym wyglądem, a także dość płynnym i spokojnym zachowaniem, które zapewnia ogólną spokojną atmosferę.

Jest dość uniwersalny i neutralny. Dzięki temu mógłby stać się doskonałą animacją tła dla wielu projektów.

Zobacz test kropli płótna pióra autorstwa Shaw

Blob autorstwa Jeffreya

To rozwiązanie Jeffreya to zwycięskie połączenie dwóch trendów. Tutaj można znaleźć nierówne tło, które jest obecnie bardzo popularne, oraz płynne zachowanie, które przeważa nad innymi opcjami.

Fragment kodu jest tworzony za pomocą HTML, CSS i JavaScript. Wygląda spójnie w różnych przeglądarkach i urządzeniach. Artysta używa podstawowego algorytmu sprężynowego, który sprawia, że ​​interakcja z ogromną plamą wydaje się realna i niesztuczna.

Zauważ, że chociaż plamka zajmuje połowę sceny, nie przytłacza obserwatorów. Gładkie, spokojne zachowanie stoi za tą dyskretnością.

Zobacz kropelkę pióra autorstwa Jeffreya

Bloby autorstwa Charlotte Dann

Jeśli jedna kropla nie wystarczy do uzyskania odpowiedniego wrażenia, zawsze możesz wybrać ich kilkanaście. Charlotte Dann ze swoim pomysłowym fragmentem kodu pokaże, jak to zrobić, nie rujnując ogólnego efektu i nie przytłaczając odwiedzających.

Jej fragment kodu to tylko uczta dla oka. Zawiera wiele małych ruchomych bąbelków, które wchodzą ze sobą w interakcje. Każda z nich wygląda jak mała plamka światła. Razem tworzą jedną wielką plamę, która emanuje ciepłem na wszystkich frontach.

Zobacz kulki pióra Charlotte Dann

Przejdźmy teraz od płaskiego świata do trójwymiarowego.

Blob autorstwa Georgi Nikoloff

Blob autorstwa Georgi Nikoloff to punkt w przypadku. Od razu rzuca się w oczy żywą kolorystyką, nowoczesnym wyglądem i dynamicznym zachowaniem. Deweloper maksymalnie wykorzystuje zaawansowane technologie, wykorzystując na swoją korzyść WebGL, GLSL i shadery. Mimo że rozwiązanie podlega kompatybilności z przeglądarkami, wygląda inspirująco.

Zobacz kropelkę Pen autorstwa Georgi Nikoloff

Eksperyment nr 6 autorstwa Daniela Del Core

Daniel Del Core pokazuje widzom online, jak bawić się hałasem Simplex i urozmaicać go starannie odtworzonymi teksturami. Rezultatem jest inspirowana cukierkami, przypominająca farbę piłka. Chociaż porusza się dość szybko, jest tak hipnotyzujący, że trudno od razu oderwać od niego wzrok.

Zobacz eksperyment z piórem nr 6 autorstwa Daniela Del Core

Fałszywa kropla cząstek autorstwa Eli Fitch

W przeciwieństwie do poprzedniego przykładu, który ma odważną osobowość i charyzmę gwiazdy pop z opętanych spandexem lat 80., ten wydaje się być czymś ze skromnej przyszłości techno. Blob jest zbudowany z maleńkich cząstek, które stają się jaśniejsze pod pewnymi kątami, aby uzyskać wygląd 3D.

Jak można się było spodziewać, artysta wykorzystuje magię Three.js i pomysłową pracę z teksturą proceduralną, aby zrealizować tę koncepcję.

Zobacz fałszywą plamę cząstek Pen #3 grudnia autorstwa Eli Fitcha

Generator blobów CSS autorstwa Edwina Chen

Zamierzamy zakończyć naszą kolekcję o CSS Blob Generator autorstwa Edwina Chena. Jak wskazuje tytuł, to pióro zawiera mały plac zabaw, na którym można stworzyć kształt kropli.

Tutaj znajdziesz mały panel, w którym możesz przypisać promień do każdej granicy. Chociaż jest statyczny i płaski, możesz łatwo skopiować wynik i wprawić go w ruch za pomocą JavaScript.

Zobacz generator bloczków Pen CSS autorstwa Edwina Chen

Idealny kształt dla uspokajającej atmosfery

Nic dziwnego, że w dzisiejszych czasach popularność staje się łagodna i spokojna natura płynów. Niczym mały, hipnotyzujący strumień płynący przez las, wabi cię i służy jako wyspa spokoju w ciągle zmieniającym się świecie online.

Animacje oparte na blobach są po prostu przeznaczone do korzystania z nowoczesnych projektów. Nie rzucają się w oczy, choć z pewnością przykuwają uwagę. Niezależnie od tego, czy wybierzesz elegancką, płaską realizację, czy ekstrawaganckie 3D, z łatwością stworzy spokojną atmosferę.

Wzbogaci wrażenia, ozdobi tło, a jednocześnie ustąpi miejsca treści. Te tła pomogą Ci zachować równowagę między danymi wizualnymi i tekstowymi.