Aflați dezvoltarea la Frontend Masters

care este

Recent am fost editor invitat pentru un număr din Bizarro Devs. Este un buletin informativ minunat! Du-te înscrie-te! Am pus o grămadă de link-uri în jurul blob-urilor. La fel ca acele forme ciudate stranii aleatorii care sunt atât de „înăuntru” chiar acum. Iată și acele linkuri. Sunt întotdeauna un fan al publicării lucrurilor pe care le scriu;)

Blobs! Blobs sunt în! Blobs sunt - ahem - cam bizare. Mă voi bucura într-un design precum acest raport anual al lui Matt Pamer toată ziua. Îmi place să urmăresc o tendință de proiectare ca aceasta care se manifestă în instrumentele de proiectare și devin aplicată în multe moduri creative și meșteșugite.

Am putea începe cu și desena propriul nostru blob folosind instrumentul Pen care este destul de mult stoc în fiecare aplicație de proiectare vectorială. Totuși, sunt un înșelător și probabil că aș termina verificarea The Noun Project pentru câteva exemple de blob și voi fura SVG-ul de acolo. Dar, din păcate, nu există prea multe, cel puțin în ceea ce privește blob-urile.

Mulțumesc lui Dumnezeu pentru așteptare (așteaptă) ... BLOBMAKER:

Odată ce avem un blob, implorăm doar să ne mișcăm. Monica Dinculescu arată cum să faci exact asta cu CSS pur și utilizarea liberală a diferitelor transformări CSS într-o animație cu cadru cheie:

Sau putem folosi o bibliotecă JavaScript ca KUTE.js pentru a obține toate morph-y, așa cum a făcut Heartbeat aici:

O bibliotecă precum Greensock ar putea ajuta la mișcarea și transformarea bloburilor din jur. Greensock are chiar și un plugin care este probabil cel mai puternic instrument de transformare de acolo. Acest stilou folosește Greensock, dar adaugă câteva filtre SVG native, astfel încât blob-urile să se strângă reciproc în mod satisfăcător. L-am putea numi efectul gooey:

Până acum ne-am uitat la SVG, dar nu excludeți! Liam Egan a făcut ca acest blob pe bază de pânză să fie de-a dreptul zgârcit:

De ce să nu adăugați puțină fizică la petrecere, cum ar fi gravitația, și lăsați-i să se blocheze astfel! Hakim El Hattab a făcut-o aici:

Vezi stiloul
Blob de Hakim El Hattab (@hakimel)
pe CodePen.

Și bloburile nu trebuie să fie singure! Blobs care sunt strânse împreună sunt ca fluid. S-ar putea să obțineți o lovitură din articolul Peeke Kuepers Simulând pete de lichid.