Share
Un sacco di minuscole particelle che si muovono e interagiscono tra di loro o con te hanno un certo fascino per loro. Se ti trovi in una situazione in cui devi lavorare con molte particelle, Particles.js ti sarà utile. Come è evidente dal nome, è una libreria JavaScript che può aiutarti a creare sistemi di particelle. Inoltre, è leggero, facile da usare e ti dà un sacco di controllo.
In questo tutorial, tratterò tutte le funzionalità della libreria e ti aiuterò a iniziare. Questo tutorial è la prima parte della serie e riguarderà solo le basi.
Innanzitutto, è necessario ospitare la libreria. Puoi caricarlo sul tuo server o usare jsdeliver CDN come me.
È inoltre necessario creare un elemento DOM in cui Particles.js creerà le particelle. Dategli alcuni facilmente identificabili id , per riferimento in seguito.
Ora, per creare un sistema di base di particelle con impostazioni predefinite, è sufficiente una sola riga di JavaScript per inizializzare la libreria.
particlesJS ();
Le particelle sono di default bianche. Sono anche interconnessi con sottili linee bianche. Quindi, se non stai vedendo nulla adesso, cambia lo sfondo con qualcos'altro. Ecco il mio CSS per lo styling della particella div:
# particles-js background: cornflowerblue;
Prova a cliccare da qualche parte all'interno della demo qui sotto. Dopo ogni clic, Particles.js genererà altre quattro nuove particelle.
Anche se ci sono volute solo quattro righe di codice per creare la demo precedente, il risultato finale potrebbe non essere quello che stai cercando. Per me, le particelle sembrano essere un po 'più grandi di dimensioni e densamente imballate. Forse vuoi che le particelle abbiano una forma diversa o abbiano una dimensione casuale. Particles.js ti permette di impostare tutte queste e molte altre proprietà in JSON a cui puoi fare riferimento durante l'inizializzazione. La sintassi generale per chiamare la funzione sarà simile a:
particlesJS (dom-id, path-json, callback (opzionale));
Qui, dom-id è l'id dell'elemento in cui si desidera che le particelle appaiano. path-json è il percorso del file JSON con tutte le opzioni di configurazione e richiama è una funzione di callback opzionale. Invece di un percorso, puoi inserire direttamente il tuo codice JSON nel secondo parametro.
Proviamo a creare nevicate usando questa fantastica libreria. Inizialmente, la nostra funzione sarà simile a:
Accentsconagua
particlesJS ("snowfall", "assets / snowflakes.json");Ho rimosso la funzione di callback e cambiato il DOM Id a un nome più specifico. I fiocchi di neve avranno per lo più una forma sferica. Cadranno verso il basso e avranno una dimensione non uniforme. Inoltre, a differenza del nostro primo demo, non saranno collegati da linee.
All'inizio, il nostro snowflakes.json il file avrà il seguente codice:
"particelle": , "interattività":
Entreranno tutte le nostre opzioni di configurazione relative a proprietà fisiche come forma, dimensioni e movimento particelle. Entreranno tutte le opzioni di configurazione che determinano il comportamento dell'interazione interattività.
Sto impostando il numero di particelle su 100. Questo dipenderà generalmente dallo spazio disponibile. Come discusso in precedenza, imposterò anche la forma in cerchio. A questo punto il tuo file dovrebbe apparire come:
"particles": "numero": "valore": 100, "forma": "tipo": "cerchio", "interattività":
Sto usando un valore di 10 per impostare la dimensione dei fiocchi di neve. Dato che i fiocchi di neve variano in dimensioni, imposterò casuale a vero. In questo modo i fiocchi di neve possono avere qualsiasi dimensione tra zero e il limite massimo che abbiamo specificato. Per disabilitare o rimuovere tutte le linee che collegano insieme queste particelle, è possibile impostare abilitare a falso per line_linked.
Per spostare le particelle intorno, dovrai impostare il abilitare proprietà a vero. Senza altre impostazioni, le particelle si muoveranno a casaccio come se fossero nello spazio. Puoi impostare la direzione di queste particelle con un valore di stringa simile "parte inferiore". Anche se il movimento generale delle particelle è verso il basso, esse devono ancora muoversi un po 'in modo casuale per sembrare naturali. Questo può essere ottenuto impostando dritto a falso. A questo punto, snowflakes.json avrà il seguente codice:
"particles": "numero": "valore": 100, "forma": "tipo": "cerchio", "dimensione": "valore": 10, "casuale": vero, "line_linked": "enable": false, "move": "enable": true, "speed": 2, "direction": "bottom", "straight": false, "interactivity":
Con il codice JSON sopra riportato, otterrai il seguente risultato:
Se passi sopra la demo sopra, noterai che le linee esistono ancora ma si mostrano solo temporaneamente durante il passaggio del mouse. Per rimuoverli completamente, puoi impostare il abilitare proprietà per il onhover evento a falso. Prova a cliccare all'interno della demo qui sopra e noterai che ogni clic genera quattro particelle. Questo è il comportamento predefinito. Puoi anche cambiare il numero di particelle usando il particles_nb proprietà sotto Spingere. Ho impostato questo numero su 12 in questo caso.
È inoltre possibile determinare se rilevare gli eventi sulla finestra o sulla tela utilizzando detect_on opzione.
Ecco il codice completo per il file JSON:
"particles": "numero": "valore": 100, "forma": "tipo": "cerchio", "dimensione": "valore": 10, "casuale": vero, "line_linked": "enable": false, "move": "enable": true, "speed": 2, "direction": "bottom", "straight": false, "interactivity": "detect_on": "canvas", "events": "onhover": "enable": false, "modes": "push": "particles_nb": 12
Come puoi vedere, non ho dovuto abilitare specificamente il al clic evento. Si è abilitata di default. Allo stesso modo, potrei rimuovere altre opzioni come "detect_on": "canvas" sotto interattività e "dritto": falso sotto mossa. Li ho mantenuti in modo che gli antipasti non si confondessero su cose come il motivo per cui le particelle non si muovono in linea retta.
Puoi provare diversi valori per modificare i fiocchi di neve in questa demo di CodePen.
Iniziare con Particles.js è facile. Se non hai mai lavorato con i sistemi di particelle, questa libreria ti farà iniziare in pochissimo tempo. Questo tutorial era solo un'introduzione di base alla libreria. Nei prossimi due tutorial di questa serie, tratterò in modo molto più dettagliato tutti gli aspetti di questa libreria.
Se avete domande su questo tutorial, fatemelo sapere nei commenti.
