10 bellissimi esempi di animazione di particelle nel web design

Prendendo d'assalto il Web, le animazioni delle particelle sono riuscite a ritagliarsi una bella nicchia diversi anni fa. La massiccia attuale ossessione per i design che hanno un'atmosfera high-tech e decorazioni geometriche li rende una delle soluzioni più ricercate oggi.

Di norma, l'animazione delle particelle può essere vista nelle sezioni degli eroi come, ad esempio, in JetUp Digital.

Come puoi vedere, è un modo elegante per aggiungere un po' di pepe alla prima impressione, separando delicatamente e discretamente il sito Web dalla massa.

Per riprodurre questo effetto, il tuo primo passo dovrebbe essere il partitions.js.

È un plugin leggero di Vincent Garreau che è il cuore e l'anima della maggior parte delle animazioni di particelle là fuori. Inoltre, allo stato originale, è una delle soluzioni più copiate sul web, anche se forse non con un'intensità così elevata come nell'esempio dell'autore.

In generale, gli sviluppatori preferiscono varianti più pulite, modeste e calme. Ad esempio, controlla Canvas Particles di Romswell Roswell Parian Paucar. È una combinazione di particelle e parallasse che si traduce in un'estetica coinvolgente e dinamica.

Tuttavia, ciò non significa che l'approccio si limiti solo a questo tipo di realizzazione. Consideriamo Particles in space di Dean Wagman, il sistema di particelle uniche CSS di Robin Selmer e, naturalmente, l'effetto push away abilmente riprodotto e presentato in un codepen di Alex Safayan. Mentre il concept di Robin Selmer è solo un pezzo piacevole da guardare; gli altri due richiedono l'interazione dell'utente, ed è sempre emozionante.

Utilizzo dell'animazione delle particelle per impressionare

Col passare del tempo, la tecnica è maturata. Dal caos caotico di minuscoli punti bianchi sparsi sulla tela, si è trasformato in uno strumento con un grande potenziale. Non è qualcosa di straordinario, eppure ha un certo fattore wow. Inoltre, contribuisce perfettamente all'estetica high-tech, geometrica e professionale, completandole naturalmente.

La premessa è: l'animazione delle particelle dovrebbe impressionare. E gli sviluppatori si attengono a questo postulato nel bene e nel male, traendone il massimo. Consideriamo alcuni frammenti di codice fenomenali creati dai veri fan di questa soluzione.

30.000 particelle di Justin Windle

Qui il titolo parla da sé. Con 30.000 particelle a bordo, ti aspetti qualcosa di grandioso. E Justin Windle ha sicuramente soddisfatto le nostre aspettative. Il suo concetto è incredibile. Usa il mouse per giocare. La fisica è semplicemente eccezionale. Questa versione dell'animazione delle particelle è piuttosto popolare tra gli sviluppatori, anche se non in una scala così monumentale.

Pesce in acqua di Alex Safayan

Alex Safayan ha escogitato quasi la stessa soluzione, ma in questo caso le particelle sono sempre più ingrandite. Il cursore del mouse spinge anche via i punti, formando una traccia con un sottile effetto increspato. Il comportamento dell'animazione ricorda il movimento del pesce quando è vicino alla superficie dell'acqua. Nota la fisica: l'interazione tra i punti è ben congegnata.

PLANCTON – Vita di particelle di Marco Dell'Anna

Avendo ricevuto un premio per il progetto più sentito del 2017, Plankton è sicuramente degno di attenzione. Il progetto affascina non solo con l'idea ma anche con la realizzazione. Dalla colorazione tenue che si adatta qui come un guanto a un comportamento magnifico che sembra incredibilmente naturale, Marco Dell'Anna ha un occhio per i dettagli.

STARDUST di Marco Dell'Anna

Adoro la magnifica atmosfera retrò, i tocchi al neon e la splendida colorazione qui. È così difficile distogliere lo sguardo da esso. Stardust è una simbiosi di design e codifica che si traduce in un capolavoro stimolante.

Gravity Points di Akimitsu Hamamuro

Akimitsu Hamamuro ti invita ad aggiungere i cosiddetti "punti di gravità" nel suo playground. Si intromettono nel movimento caotico dei punti e li attirano come una calamita. Sebbene non svolgano un ruolo di centro orbitale; eppure formano punti focali che costringono le particelle a muoversi nella loro direzione.

Sfera di particelle CSS di Nate Wiley

Le sfere sono scelte stilistiche piuttosto popolari per le aree degli eroi in questi giorni. E l'interpretazione di Nate Willey di questa tendenza è piuttosto impressionante. Il globo sembra fragile grazie a minuscole particelle e, allo stesso tempo, fermo grazie a un comportamento ben ponderato. La sua routine di disintegrare e riformare la sfera è fantastica.

Onde di particelle di Kevin Rajaram

Kevin Rajarm ha preso la bellezza e l'eleganza dell'animazione delle particelle e l'ha migliorata con la bellezza di Three.js, realizzando un concetto delicato ma davvero sofisticato. Una straordinaria vista delle onde sembra futuristica, artificiale e ipnotizzante.

Usi non ortodossi

Ci sono modi ancora più impressionanti per usare l'animazione delle particelle. Usciamo dai sentieri battuti e pensiamo fuori dagli schemi: l'approccio può facilmente avvantaggiare elementi come loghi e scritte.

Logo interattivo delle particelle di Tamino Martinius

Interactive Particle Logo ne è un tipico esempio. Sembra una soluzione reinventata dello snippet di Justin Windle che è descritto sopra. Sebbene non ci siano 30.000 punti, è composto da un numero impressionante di particelle che abilmente formano la parola “CODEPEN”. Questo è uno di quei casi in cui il concetto ha trovato un uso pratico.

Testo in particelle di Louis Hoebregts

La versione colorata della soluzione precedente è disponibile in questa penna di Louis Hoebregts. Qui il testo è formato da mille cerchi pieni colorati che sono arricchiti dalla stessa interattività dell'esempio precedente.

Le particelle scrivono testo di Marco Dell'Anna

Anche se questo non è un ingresso drammatico, c'è qualcosa di ammaliante in questo. L'animazione fluida scopre lentamente i personaggi e accende il nostro interesse. Il concetto ha un certo fascino misterioso simile all'introduzione di "Stranger Things".

FALLO SOLO di Marco Dell'Anna

Questo è un altro capolavoro di Marco Dell'Anna. Questa volta, l'animazione delle particelle partecipa alla formazione di un famoso logo Nike. Da oscuro e semitrasparente a nitido e solido, l'animazione espone gradualmente il logo, catturando discretamente l'attenzione generale.

404 particella testo di enrico toniato

Se pensi che l'unico uso pratico dell'animazione particellare sia l'arricchimento delle sezioni degli eroi, allora Enrico Toniato ti dimostrerà che hai torto. La sua interpretazione della pagina di errore è brillante. Segui la sua idea e usa le particelle messe in moto per salvare la pagina 404 dall'aspetto noioso e ripugnante.

Un effetto che cattura l'attenzione

L'animazione delle particelle è uno di quei casi in cui più piccolo è meglio. Più piccoli sono i punti, più impressionante è l'effetto che si può ottenere. Da un lato, sembra sofisticato e intricato poiché sono coinvolte geometria e fisica. D'altra parte, sembra fragile e sottile grazie alle forme delicate. Questa fusione unica rende l'animazione delle particelle eccezionale e accattivante.