Atacul fundalurilor animate bazate pe blob în Web Design

Fundalurile animate sunt o caracteristică populară a site-urilor web moderne. Nu mai este o tendință sau ceva extraordinar. Este doar una dintre modalitățile viabile de a împodobi o zonă de erou în zilele noastre. Deși există încă o problemă cu compatibilitatea browserului, soluția a reușit să-și creeze o nișă.

Există diferite tipuri de animații. Te poți împiedica de:

• Animații cu particule;
• Animații caleidoscopice;
• Animații 3D abstracte;
• Animații geometrice netede și multe altele.

În timp ce în urmă cu câțiva ani animațiile cu particule inspirate de constelații dominau locul, în zilele noastre animațiile în formă de blob excită mințile echipelor creative. Ce poti face? Comportamentul lichid este irezistibil. Rutina de morphing care arată cum o picătură mare se mișcă fără probleme în spațiu cucerește cu ușurință publicul online și pune site-ul dvs. în frunte.

Pentru a beneficia de această tehnică generală, vă oferim o colecție de fragmente de cod remarcabile care vă vor oferi un indiciu despre cum să vă creați propria animație în formă de blob. Puteți face acest lucru cu instrumente tradiționale sau noi. Acum, să găsim potrivirea perfectă pentru următorul tău proiect.

Animație blob de Uwe Chardon

Parerea lui Uwe Chardon asupra acestei soluții populare este practică și inspiratoare. Are un blob simplu, plat, cu o culoare portocalie frumoasă și margini netede plasate într-un mediu curat. A reușit să imite destul de bine comportamentul lichid.

Rezultatul este o combinație câștigătoare de formă simplă și comportament complicat, care arată destul de impresionant.

Vedeți animația Pen Blob CSS pur de Uwe Chardon

Blob de Ashton Holgate

Exemplul anterior descrie un tip tradițional de blob cu o formă neregulată și o transformare relativ expresivă. Cu toate acestea, acest proiect al lui Ashton Holgate se lipește de o formă mai divină, care aproape se învecinează cu cercul, iar schimbările sunt abia sesizabile. Cu toate acestea, arată și extraordinar.

Cu atât mai mult, artistul s-a jucat și cu textul, forțându-l să-și schimbe culoarea în cea opusă atunci când lovește zona bulei.

Vedeți Pen Blob de Ashton Holgate

Încărcător de lichid care sări de Fabio Ottaviani

Fabio Ottaviani a pus în practică natura jucăușă a comportamentului lipicios care este inerent animațiilor blob. Bula lui este mică, dar produce un impact destul de mare prin transformarea adorabilă și săritura amuzantă.

Deși pe plăcuța de identificare a proiectului stiloului scrie „Loader”, acesta poate fi ușor transformat într-un detaliu decorativ al fundalului. Și pentru a face acest lucru, tot ce trebuie să știți este HTML și CSS, deoarece artistul nu folosește deloc magia JavaScript. Inteligent.

Vezi Pen Bouncing Liquid Loader de Fabio Ottaviani

Canvas Blob Test de Shaw

Spre deosebire de exemplul anterior, această picătură este generată exclusiv de JavaScript. Așa că fiți gata să vă scufundați într-o soluție captivantă și să jucați complicat cu grafica. Mai mult decât atât, conceptul diferă de celelalte prin aspectul său primitiv, împreună cu un comportament destul de lin și calm, care creează o atmosferă generală senină.

Este destul de universal și neutru. Astfel, ar putea deveni o animație de fundal perfectă pentru numeroase proiecte.

Vezi testul Pen Canvas Blob de Shaw

Blob de Jeffrey

Această soluție de la Jeffrey este o combinație câștigătoare a două tendințe. Aici, puteți găsi un fundal neregulat care este foarte popular în aceste zile și comportamentul lichid care prevalează asupra celorlalte opțiuni.

Fragmentul de cod este realizat cu HTML, CSS și JavaScript. Arată consecvent în diferite browsere și dispozitive. Artistul folosește un algoritm de primăvară de bază care face ca interacțiunea cu blob uriaș să pară reală și neartificială.

Rețineți că, deși blob-ul ocupă jumătate din scenă, nu-i învinge pe privitori. Comportamentul lin și senin stă în spatele acestei discretii.

Vedeți Pen Blob de Jeffrey

Blobs de Charlotte Dann

Dacă un blob nu este suficient pentru a produce o impresie corectă, atunci puteți alege oricând o duzină de ele. Charlotte Dann, cu fragmentul ei de cod ingenios, vă va arăta cum să faceți acest lucru fără a strica efectul general și a copleși vizitatorii.

Fragmentul ei de cod este doar un răsfăț pentru ochi. Prezintă o mulțime de blob-uri mici în mișcare care interacționează între ele. Fiecare arată ca un mic punct de lumină. Împreună, formează o pată uriașă care emană căldură pe toate fronturile.

Vedeți Pen Blobs de Charlotte Dann

Acum, să trecem de la lumea plată la una tridimensională.

Blob de Georgi Nikoloff

Blob de Georgi Nikoloff este un punct în caz. Ea lovește imediat ochiul prin colorarea sa vibrantă, aspectul high-tech și comportamentul dinamic. Dezvoltatorul profită la maximum de tehnologiile avansate, folosind WebGL, GLSL și shadere în avantajul său. Chiar dacă soluția este supusă compatibilității cu browserul, pare inspirată.

Vedeți blob-ul Pen de Georgi Nikoloff

Experimentul #6 de Daniel Del Core

Daniel Del Core arată publicului online cum să se joace cu zgomot Simplex și să-l îmbogățească cu niște texturi reproduse cu atenție. Rezultatul este o minge inspirată de bomboane, asemănătoare vopselei. Deși se mișcă destul de repede, este atât de fascinant încât este dificil să-ți iei ochii de la el imediat.

Vezi Experimentul Pen #6 de Daniel Del Core

Pată de particule false de Eli Fitch

Spre deosebire de exemplul precedent, care are o personalitate îndrăzneață și carisma unei vedete pop din anii '80 obsedați de spandex, acesta se simte ca un lucru din viitorul modest techno. Pata este construită din particule minuscule care devin mai strălucitoare sub anumite unghiuri pentru a obține un aspect 3D.

În mod previzibil, artistul folosește magia Three.js și niște lucrări ingenioase cu textură procedurală pentru a obține acest concept.

Vedeți Pen #3December blob de particule false de Eli Fitch

Generator de blob CSS de Edwin Chen

Vom încheia colecția noastră cu CSS Blob Generator de Edwin Chen. După cum spune titlul, acest stilou are un mic loc de joacă unde puteți crea o formă de blob.

Aici veți găsi un mic panou unde puteți aloca o rază fiecărui chenar. Deși este static și plat, puteți copia cu ușurință rezultatul și îl puteți pune în mișcare cu ajutorul JavaScript.

Vedeți Generatorul de blob CSS Pen de Edwin Chen

Forma perfectă pentru o atmosferă liniştitoare

Nu este surprinzător faptul că natura netedă și calmă a comportamentului lichid devine populară în zilele noastre. Ca un mic pârâu fascinant care străbate pădure, te ademenește și servește ca o insulă de liniște în lumea online în continuă schimbare.

Animațiile bazate pe blob sunt doar destinate să beneficieze de proiecte moderne. Sunt discreti, deși cu siguranță atrag atenția. Indiferent dacă alegeți o realizare elegantă, plată sau un 3D extravagant, va stabili cu ușurință o atmosferă calmă.

Va îmbogăți experiența, va împodobi fundalul și, în același timp, va lăsa loc și conținutului. Aceste fundaluri vă vor ajuta să păstrați echilibrul între datele vizuale și cele textuale.