8 frammenti che dimostrano l'effetto repellente nel web design

Gli esperimenti con la tela sono il discorso della città in questi giorni. Possono essere visti non solo come concetti nei popolari campi da gioco degli sviluppatori web, ma anche come soluzioni per progetti di vita reale. La varietà è senza dubbio sorprendente: dalle animazioni di particelle primitive basate su plug-in popolari a idee uniche che sono un'interfusione di strumenti moderni e collaudati nel tempo.

Oggi attiriamo la vostra attenzione sull'effetto repellente. Anche se ha un comportamento ripugnante, ha certamente una natura attraente. Incoraggiando gli utenti a giocare con i dettagli dello scenario spingendoli in varie direzioni o, in alcuni casi, addirittura spazzando via tutto, diventa immediatamente l'intrattenimento principale. Rende l'esperienza dell'utente piacevole ed emozionante.

Esploriamo una raccolta di demo stimolanti con frammenti di codice in modo da poter vedere tu stesso la tendenza unica.

Linee respinte

A prima vista, questa demo ricorda un set di corde di chitarra. Sposta il cursore su di loro e vedrai la magia. Le linee iniziano a piegarsi e deformarsi, formando una piccola sfera.

Il pannello delle opzioni a destra consente di controllare l'effetto. Puoi impostare il raggio dell'intervallo del mouse, aggiungere o ridurre il numero di linee o modificare la distanza tra le stringhe. Nota la fisica. È ben congegnato e riprodotto con cura.

Vedi le linee di repulsione della penna di Daniel Velasquez

30.000 particelle

L'effetto repellente sembra semplicemente fantastico se applicato a migliaia di punti invece che a linee. Justin Windle lo dimostra in pratica. Il suo progetto iconico e molto popolare su CodePen presenta un pannello in cui si trovano comodamente 30.000 minuscole particelle.

Sono strettamente imballati insieme per creare una superficie densa. Passa il cursore del mouse su di esso e vedrai come i punti scappano da te. Sebbene non scompaiano dalla vista, sono trattenuti dalla portata del mouse. Pertanto, puoi vedere un cerchio vuoto relativamente grande in cui i punti formano il bordo.

Vedi la penna 30.000 particelle di Justin Windle

Particelle interattive

Se la semplice cornice rettangolare non ispira la tua creatività, puoi sempre riunire tutti quei punti in personaggi come ha fatto Tamino Martinius nel suo progetto Interactive Particles.

La sua demo include una parola, in cui ogni lettera è composta da centinaia di punti. Soffiali via con il cursore del mouse per rendere le cose più piccanti. C'è un piccolo centro di controllo dove puoi cambiare i parametri dell'esperimento e adattarlo alle tue preferenze.

Guarda il logo Pen Interactive Particle di Tamino Martinius

Testo in particelle

Giochiamo con colore e dimensioni per arricchire i due concept precedenti con alcuni colpi di scena vivaci come ha fatto Louis Hoebregts nel suo progetto Text to Particles.

A differenza della soluzione di Tamino Martinius, qui i punti hanno raggi diversi oltre che colori diversi. Inoltre, puoi modificare il testo impostandolo utilizzando l'input. Il cursore del mouse ha un comportamento fluido e delicato che disperde la folla e provoca un piccolo disturbo nel parco giochi. Questa è una demo davvero piacevole per gli occhi.

Vedi il testo della penna alle particelle di Louis Hoebregts

Palle e gravità

L'effetto repellente può essere facilmente combinato con altre soluzioni basate sulla fisica per ottenere risultati eccezionali. Considera le palle e la gravità.

Il nome del progetto dice tutto. La gravità, così come l'effetto repellente, sono al centro del concetto, rendendo l'esperienza intrigante.

A differenza degli esempi precedenti, qui devi afferrare il cerchio e usarlo come strumento per allontanare gli altri cerchi. Puoi quasi colpire queste palline piatte colorate, costringendole a muoversi. Inoltre, devi combattere la gravità, il che rende l'esperienza ancora più eccitante.

Guarda la Penna BALLS&GRAVITY di Marco Dell'Anna

Attrattore

Anche questo progetto di Marco Dell'Anna è costruito intorno alla gravità. Puoi controllarlo con il cursore del mouse. Usalo per spostare le particelle e riorganizzare la loro posizione.

Nota, anche se le particelle cambieranno la loro posizione, cercheranno comunque di tornare al cerchio. Quindi qui puoi vedere un cursore del mouse che svolge il ruolo di una calamita e, allo stesso tempo, uno strumento per allontanare i punti (almeno temporaneamente).

See the Pen Attractor – MatterJS di Marco Dell'Anna

Attivare

Activate è una penna eccezionale creata da Gerard Ferrandez. Proprio come nell'esempio precedente, anche l'autore ha optato per la gravità. Questa volta è combinato con un comportamento fluido e, naturalmente, l'effetto repellente. Di conseguenza, il progetto ci attira con il suo aspetto scherzoso e la sua natura giocosa.

Vedi la penna attivata di Gerard Ferrandez

Plasma Moar

L'effetto repellente può essere di grande aiuto anche per le animazioni delle particelle. Puoi renderli ancora più emozionanti. Dai un'occhiata a Moar Plasma.

Qui puoi vedere un'animazione caotica in cui il cursore del mouse spaventa tutte le particelle spingendole su lati diversi. Non solo puoi goderti la demo, ma anche interagire con essa.

Guarda il plasma Pen Moar di John Chin-Jew

Particelle nevose

Snowy Particles è un altro eccellente esempio in cui la tradizionale animazione delle particelle ottiene una spinta. Nat, l'autore della penna, ha usato due trucchi.

Innanzitutto, il cursore del mouse ha il potere di trasformare semplici punti in fiocchi di neve, in modo che la scena sembri davvero magica. In secondo luogo, viene aggiunto un piccolo effetto repellente che disperde leggermente la massa nevosa in modo da poter vedere i caratteristici fiocchi di neve. Semplicemente fantastico.

Vedi la neve di Pen partitions.js di Nat

Repellenti

Un'altra area in cui l'effetto repellente porta benefici e converte facilmente una scena noiosa in una stravaganza sono gli effetti di testo. Abbiamo già visto come le parole create da mille punti sembrano eccezionali. È ora di trasformare i punti in linee e ravvivare il tutto con l'effetto repellente. Ritenere Repellenti come punto nel caso.

Il progetto presenta una parola in cui i simboli sono costituiti da linee corte e sottili dirette agli spettatori. In questo modo puoi quasi percepirne la natura volumetrica. Prendi il cursore del mouse e trascinalo sul testo e vedrai come le linee iniziano a danzare.

Il loro comportamento è fluido e gradevole, anche se il testo stesso sembra un po' nitido e acuto. Inoltre, anche le linee si muovono da sole, quindi sembra che ci sia una piccola brezza che fa oscillare parti della composizione. Di conseguenza, puoi goderti un vero capolavoro in cui un semplice testo guida lo spettacolo.

Vedi Pen Repellers di Rein van der Woerd

Attrazione attraverso la repulsione

Anche se l'effetto repellente viene utilizzato per allontanare i dettagli della composizione, è comunque assolutamente magnetico. Non puoi distogliere lo sguardo da esso. Cattura immediatamente l'attenzione con il suo comportamento giocoso e spinge gli utenti a interagire con la scena.

L'effetto repellente non è il solo nella sua lotta per conquistare il pubblico. Collabora perfettamente con altri tipi di animazioni ed effetti creando soluzioni uniche e accattivanti.