10 exemple frumoase de animație cu particule în design web

Luând cu asalt Web-ul, animațiile cu particule au reușit să-și creeze o nișă în urmă cu câțiva ani. Obsesia actuală masivă pentru modelele care au o atmosferă high-tech și decor geometric le face una dintre cele mai căutate soluții în prezent.

De regulă, animația cu particule poate fi văzută în secțiunile eroilor, cum ar fi, de exemplu, în JetUp Digital.

După cum puteți vedea, este o modalitate elegantă de a adăuga un anumit condiment la prima impresie, în timp ce separă delicat și discret site-ul web de mulțime.

Pentru a reproduce acest efect, primul pas ar trebui să fie particles.js.

Este un plugin ușor de Vincent Garreau, care este inima și sufletul majorității animațiilor cu particule de acolo. Mai mult, în starea sa originală, este una dintre cele mai copiate soluții de pe web – deși poate nu cu o intensitate atât de mare ca în exemplul autorului.

În general, dezvoltatorii preferă variante mai îngrijite, modeste și calme. De exemplu, consultați Canvas Particles de Romswell Roswell Parian Paucar. Este o combinație de particule și paralaxă care are ca rezultat o estetică captivantă și dinamică.

Cu toate acestea, nu înseamnă că abordarea se limitează doar la acest tip de realizare. Luați în considerare Particulele în spațiu de Dean Wagman, sistemul de particule numai CSS de Robin Selmer și, bineînțeles, efectul de respingere reprodus cu pricepere și prezentat într-un codificator al lui Alex Safayan. În timp ce conceptul lui Robin Selmer este doar o piesă plăcută de urmărit; celelalte două necesită interacțiunea utilizatorului, iar asta este întotdeauna interesant.

Folosind Particle Animation pentru a impresiona

Odată cu trecerea timpului, tehnica s-a maturizat. Din mizeria haotică de puncte albe minuscule care au fost împrăștiate prin pânză, s-a transformat într-un instrument cu mare potențial. Nu este ceva extraordinar, dar are un anumit factor wow. Mai mult decât atât, contribuie perfect la estetica high-tech, geometrică și de afaceri – terminând-o în mod natural.

Premisa este: animația cu particule ar trebui să impresioneze. Și, dezvoltatorii țin de acest postulat prin gros și subțire, profitând la maximum de el. Să luăm în considerare câteva fragmente de cod fenomenale create de adevărații fani ai acestei soluții.

30.000 de particule de Justin Windle

Aici titlul vorbește de la sine. Cu 30.000 de particule la bord, te aștepți la ceva grandios. Și Justin Windle cu siguranță a îndeplinit așteptările noastre. Conceptul lui este incredibil. Folosește mouse-ul pentru a te juca. Fizica este pur și simplu excepțională. Această versiune a animației cu particule este destul de populară în rândul dezvoltatorilor, deși nu la o scară atât de monumentală.

Pește în apă de Alex Safayan

Alex Safayan a venit cu aproape aceeași soluție, dar în acest caz, particulele sunt din ce în ce mai mari. De asemenea, cursorul mouse-ului împinge punctele, formând o urmă cu un efect de ondulare subtil. Comportamentul animației amintește de mișcarea peștilor atunci când este aproape de suprafața apei. Observați fizica: interacțiunea dintre puncte este bine gândită.

PLANKTON – Viața particulelor de Marco Dell'Anna

După ce a primit un premiu pentru cel mai plin de inimă proiect din 2017, Plancton merită cu siguranță atenție. Proiectul captivează nu numai prin idee, ci și prin realizarea. De la colorarea subtilă care se potrivește aici ca o mănușă până la un comportament magnific care arată incredibil de natural, Marco Dell'Anna are un ochi pentru detalii.

STARDUST de Marco Dell'Anna

Ador atmosfera retro magnifică, atingerile de neon și colorarea superbă de aici. E atât de greu să-ți iei ochii de la asta. Stardust este o simbioză de design și codare care are ca rezultat o capodopera inspirată.

Gravity Points de Akimitsu Hamamuro

Akimitsu Hamamuro vă invită să adăugați așa-numitele „puncte de gravitație” în locul său de joacă. Ei se amestecă în mișcarea haotică a punctelor și le trag ca un magnet. Deși nu îndeplinesc un rol de centru al orbitei; totuși formează puncte focale care forțează particulele să se miște în direcția lor.

Particle Orb CSS de Nate Wiley

Sferele sunt alegeri stilistice destul de populare pentru zonele eroilor în zilele noastre. Iar interpretarea lui Nate Willey asupra acestei tendințe este destul de impresionantă. Globul arată fragil datorită particulelor minuscule și, în același timp, ferm datorită comportamentului bine gândit. Rutina lui de dezintegrare și re-formare a sferei este fantastică.

Particle Waves de Kevin Rajaram

Kevin Rajarm a preluat frumusețea și eleganța animației cu particule și le-a îmbunătățit cu minunatul Three.js, aducând un concept delicat, dar cu adevărat sofisticat. O priveliște uimitoare a valurilor se simte futuristă, artificială și fascinantă.

Utilizări neortodoxe

Există modalități și mai impresionante de a folosi animația cu particule. Să ieșim din calea bătăliei și să gândim ieșit din cutie: abordarea poate beneficia cu ușurință de elemente precum logotipuri și litere.

Logo interactiv de particule de Tamino Martinius

Logo-ul interactiv de particule este un exemplu tipic în acest sens. Pare o soluție re-imaginată a fragmentului lui Justin Windle, care este prezentat mai sus. Deși nu există 30.000 de puncte, este compus dintr-un număr impresionant de particule care formează cu pricepere cuvântul „CODEPEN”. Acesta este unul dintre acele cazuri în care conceptul și-a găsit o utilizare practică.

Text către particule de Louis Hoebregts

Versiunea colorată a soluției anterioare este disponibilă în acest stilou de Louis Hoebregts. Aici textul este modelat de o mie de cercuri solide colorate care sunt îmbogățite de aceeași interactivitate ca în exemplul precedent.

Particulele scriu text de Marco Dell'Anna

Deși aceasta nu este o intrare dramatică, există ceva vrăjitor în ea. Animația netedă descoperă încet personajele și ne aprinde interesul. Conceptul are un anumit fler misterios asemănător cu introducerea „Stranger Things”.

DOAR FĂ-O de Marco Dell'Anna

Aceasta este o altă capodoperă a lui Marco Dell'Anna. De această dată, animația cu particule participă la modelarea unui faimos logotip Nike. De la obscur și semi-transparent la clar și solid, animația expune treptat logo-ul, captând discret atenția generală.

Text cu 404 particule de Enrico Toniato

Dacă credeți că singura utilizare practică a animației cu particule este îmbogățirea secțiunilor eroi, atunci Enrico Toniato vă va dovedi că vă înșelați. Parerea lui despre pagina de eroare este genială. Urmează-i ideea și folosește particulele puse în mișcare pentru a salva pagina 404 de a arăta plictisitoare și respingătoare.

Un efect de captare a atenției

Animația cu particule este unul dintre acele cazuri în care mai mic este mai bine. Cu cât punctele sunt mai mici, cu atât mai impresionant este un efect care poate fi obținut. Pe de o parte, pare sofisticat și complicat, deoarece geometria și fizica sunt implicate. Pe de altă parte, arată fragil și subtil datorită formelor delicate. Această fuziune unică face ca animația cu particule să fie excepțională și atrage atenția.