Accentsconagua

L'effetto lucciola

Codice
Share

Le immagini cosmiche sono usate su molti siti web come immagine di sfondo. Quelle foto sono indubbiamente belle, ma in fin dei conti sono immagini che danno poca vivacità. Con jQuery, possiamo portare trenta vite a un'immagine ancora cosmica aggiungendo un po 'di polvere spaziale (particelle) che volano come lucciole. In questo tutorial, vedremo come implementare questo effetto in 30 minuti. Impareremo anche un po 'di tecniche Javascript orientate agli oggetti.

Caratteristiche

  1. Le particelle si muovono a velocità e direzioni casuali (movimento browniano).
  2. In questo tutorial sono forniti quattro modelli di particelle. Ognuno ha un aspetto leggermente diverso.
  3. Il numero totale di particelle è configurabile.

Osserveremo questo sfondo cosmico per un periodo piuttosto lungo. Per rendere i nostri occhi più confortevoli, un'immagine scura e semplice viene utilizzata come sfondo in questo tutorial. Sentiti libero di usare più immagini colorate nei tuoi progetti.

Le particelle

Per rendere questo effetto più realistico, abbiamo quattro modelli di particelle in questo tutorial. Sono immagini minuscole con dimensioni e aspetto diversi. Guarda la figura sotto per maggiori dettagli:

  • La particella 1 è più piccola ma più luminosa. Sembra che sia perfettamente a fuoco in modo che possiamo vederlo chiaramente.
  • La particella 4 è più grande ma più scura (così scura che a malapena riesci a vederla), che imita un oggetto sfocato.

L'HTML

A differenza della maggior parte dei tutorial, è lo sfondo di una pagina web su cui ci concentreremo oggi, il che rende l'HTML abbastanza semplice:

  • Non ci sono elementi all'interno del corpo etichetta. Quindi niente ci distrarrà dallo sfondo e dall'animazione.
  • Con la definizione CSS, viene impostato uno sfondo cosmico per il corpo di questa pagina. Questo dovrebbe essere molto semplice.
  • jQuery è incluso come al solito.
    L'effetto lucciola

JavaScript orientato agli oggetti

Ora diamo un'occhiata più da vicino alla vita di una particella. Ogni particella può differire in aspetto. E si muovono a velocità e direzioni diverse. Ma tutti seguono lo stesso insieme di regole che possono essere descritte come una sequenza di azioni:

  1. Scegli a caso un modello di particelle.
  2. Crea un DOM per questa particella.
  3. Genera una velocità casuale per questa particella.
  4. Genera la posizione iniziale (Punto X e Punto Y) per questa particella.
  5. Mostra la particella nella posizione generata in 4.
  6. Genera un'altra posizione (Punto X e Punto Y) a cui si muove la particella.
  7. Animare il movimento delle particelle nella posizione generata in 6.
  8. Ripeti 6 e 7 una volta terminata l'animazione menzionata in 7.

Ogni particella segue esattamente questi otto passaggi nel corso della sua vita. E i fattori casuali, come la posizione e la velocità, fanno si che ogni particella si comporti in un modo unico. Questo è un caso perfetto per implementare alcune tecniche di programmazione orientate agli oggetti. Includiamo questi otto passaggi in una "classe" che verrà creata più volte per creare più istanze della stessa logica. Ogni istanza (particella) viene eseguita in una corsia separata e mantiene la propria velocità e direzione.

È importante notare che non ci sono classi in JavaScript. Le funzioni possono essere utilizzate per simulare in qualche modo le classi, ma in generale JavaScript è basato su prototipi piuttosto che su classi. Tutto è un oggetto. Per ulteriori informazioni su come definire e creare un'istanza di una 'classe' JavaScript, si prega di consultare questi articoli.

Proprio in questo senso, una "classe" viene definita e quindi istanziata 50 volte con il seguente codice.

 function Particle () // 1. Seleziona a caso un modello di particelle. // 2. Crea un DOM per questa particella. // 3. Genera una velocità casuale per questa particella. // 4. Genera la posizione iniziale (Punto X e Punto Y) per questa particella. // 5. Mostra la particella nella posizione generata in 4. // 6. Genera un'altra posizione (Punto X e Punto Y) a cui si muove la particella. // 7. Animare il movimento delle particelle nella posizione generata in 6. // 8. Ripeti 6 e 7 una volta terminata l'animazione menzionata in 7. ; function randomInt (max) // Genera un numero intero casuale (0 <= randomInt < max) return Math.floor(Math.random() * max);  $(function() var total = 50; var particles = []; for (i = 0; i < total; i++) particles[i] = new Particle();  );
  1. La logica in otto passaggi è racchiusa in una funzione denominata particella. Definire una funzione è il modo per definire una "classe" in Javascript.
  2. Avremo bisogno di generare un sacco di numeri casuali in questo effetto, dalla velocità alle posizioni X-Y. Quindi scriviamo una funzione per questo solo scopo e nominatela randomInt. Genera un numero intero casuale minore di un dato numero. Useremo questa funzione di volta in volta, quindi non dimenticartene.
  3. Alla fine, istanziamo il particella funzione in un ciclo, creando 50 istanze di particelle, ognuna delle quali memorizzata in un array chiamato particelle. Presta attenzione all 'nuovo'parola chiave che usiamo per istanziare un oggetto.

Alcune impostazioni di base

In questa sezione definiremo proprietà e metodi per la classe Particle. E vedremo come scegliere a caso un modello di particelle.

Possiamo usare l 'Questo'parola chiave per definire le proprietà per una' classe '. Quando si tratta di definire metodi, l 'prototipo'proprietà è la strada da percorrere. Guarda il codice qui sotto e daremo alcune spiegazioni.

 function Particle () this.path = 'images /'; this.images = ['particle1.png', 'particle2.png', 'particle3.png', 'particle4.png']; // Scegli a caso un modello di particella this.image = this.images [randomInt (this.images.length)]; this.file = this.path + this.image; // Crea un DOM particella this.element = document.createElement ('img'); // Una sequenza di azioni per prendere questo.speed (). NewPoint (). Display (). NewPoint (). Fly (); ; // Genera una velocità casuale Particle.prototype.speed = function () ; // Genera una posizione casuale Particle.prototype.newPoint = function () ; // Visualizza la particella Particle.prototype.display = function () ; // Animate Particle Movements Particle.prototype.fly = function () ;
  1. Nelle linee 2 e 3, definiamo il percorso e i nomi dei file delle nostre immagini di particelle. Ci sono più di una immagine di particelle, quindi le archiviamo in una matrice (una proprietà di particella).
  2. Nella linea 6, viene prelevata un'immagine di particelle casuali dalla matrice sopra menzionata. Il randomInt la funzione che abbiamo definito in precedenza è qui usata. Molto utile, hah?
  3. Nella riga 7, concateniamo il percorso e il nome file.
  4. Nella riga 10, viene creato un DOM img. Questo è il contenitore di una particella.
  5. La linea 13 è il nucleo di questo effetto. Una sequenza di metodi è chiamata in una catena. Questa singola riga di codice copre i passaggi da 3 a 8 menzionati nella sezione precedente. Analizzeremo tutti questi metodi molto presto.
  6. Dalla riga 17 fino alla fine, sono definiti quattro metodi per particella classe. Ognuno di loro si prende cura di una cosa particolare per una particella. Velocità() genera la velocità casuale. Newpoint () genera un insieme casuale di posizione X-Y. Display() si assicura che la particella sia visualizzata correttamente. E volare() si prende cura dell'animazione.
  7. Presta attenzione al modo in cui definiamo i metodi per una 'classe' nella Linea 17, 20, 23 e 26. Nuovi metodi sono definiti nel prototipo proprietà di una classe. Può sembrare un po 'complicato per i ragazzi provenienti da uno sfondo C, Java o PHP (come me). Se ti senti a disagio con questo, sentiti libero di passare un minuto a leggere questo articolo.

In effetti ci sono molti modi diversi per definire proprietà e metodi per una classe Javascript. Ecco un grande articolo su questo argomento.

Velocità casuale

A questo punto, abbiamo un'idea di come funzioni questo effetto. Da questa sezione, inizieremo a scrivere le funzioni che usiamo per manipolare il movimento di una particella.

Innanzitutto, generiamo una velocità casuale per una particella. La velocità determina la velocità di spostamento di una particella. Se hai familiarità con jQuery, capirai che non possiamo semplicemente passare in velocità reale, diciamo 100 pixel al secondo. In effetti, il parametro usato per descrivere la velocità in jQuery è la durata misurata in millisecondi. Quindi la domanda diventa come generare una ragionevole durata in cui una particella viaggia da un luogo all'altro. Che dire del seguente codice?

 // Genera velocità casuale Particle.prototype.speed = function () this.duration = (randomInt (10) + 5) * 1000; restituiscilo; ;
  1. Nella riga 3, generiamo semplicemente un numero casuale compreso tra 5000 e 14000. Vale a dire, una particella manterrà la sua velocità e direzione invariata per 5 - 14 secondi prima di compiere una svolta e spostarsi verso un'altra parte.
  2. Guarda la linea 5. Perché noi restituiscilo? Ricorda che queste funzioni saranno chiamate in una catena? Il ritorno dell'oggetto originale assicura che la funzione di trascinamento funzioni correttamente. Ne avremo bisogno anche in altri modi.
  3. Una volta eseguita questa funzione, a durata proprietà accessibile in a particella esempio.

Posizione casuale

Un insieme casuale di posizione X-Y è molto utile in questo effetto. Può essere usato per determinare:

  • A quel punto si presenta inizialmente una particella,
  • A quel punto una particella si muove una volta nata o finisce un viaggio.

Ecco il codice di cui abbiamo bisogno per generare un insieme casuale di posizione X-Y.

 // Genera una posizione casuale Particle.prototype.newPoint = function () this.pointX = randomInt (window.innerWidth - 100); this.pointY = randomInt (window.innerHeight - 100); restituiscilo; ;

Da qui è possibile recuperare le dimensioni della finestra corrente del browser window.innerWidth e window.innerHeight. Se una particella vola oltre il limite della finestra, le barre di scorrimento verranno visualizzate. Potremmo non volere che ciò accadesse. Quindi limitiamo il movimento delle particelle in un'area che è 100 pixel meno alta e larga della finestra del browser. Il codice sopra dovrebbe essere piuttosto semplice. Dopo che questa funzione è stata eseguita, pointX e pointy le proprietà diventano accessibili. Una volta che la funzione viene eseguita una seconda volta, pointX e pointy sarà rinnovato nel caso di particella.

Mostra la particella

Nelle sezioni precedenti, un DOM img era già stato creato per una nuova particella. Ora imposteremo alcuni attributi e mostreremo la particella da qualche parte nella finestra del browser. Questo è realizzato con il seguente codice.

 // Visualizza la particella Particle.prototype.display = function () $ (this.element) .attr ('src', this.file) .css ('position', 'absolute') .css ('top', this.pointY) .css ('left', this.pointX); $ (Document.body) .Append (this.element); restituiscilo; ;
  1. Nella linea 3, this.element contiene il DOM img creato. Imposteremo gli attributi per questo in questa funzione.
  2. Nella linea 4, questa vita contiene l'immagine casuale che abbiamo scelto dai quattro modelli di particelle. Impostando il src attributo, portiamo l'immagine delle particelle al nuovo DOM img.
  3. Con la linea da 5 a 7, la particella è posizionata da qualche parte nella finestra del browser.
  4. Nella riga 8, il DOM img appena creato viene aggiunto al corpo. La particella non verrà mai visualizzata a meno che non scriviamo questa riga di codice semplice.

Animare movimenti di particelle

Infine, siamo arrivati ​​alla parte dell'animazione che potrebbe rivelarsi più semplice di quanto pensassi.

La funzione animata in jQuery ci farà il trucco. Ci vogliono quattro parametri: animato (param, durata, easing, callback). Controlla la documentazione se non hai idea di cosa faccia.

 // Animate Particle Movements Particle.prototype.fly = function () var self = this; $ (this.element) .animate ("top": this.pointY, "left": this.pointX,, this.duration, 'linear', function () self.speed (). newPoint (). volare(); ); ;

Quello che fa il codice sopra è abbastanza semplice:

  1. Animare la particella in una posizione casuale.
  2. L'animazione prende this.duration millisecondi da completare.
  3. La particella si muove a velocità costante. (La modalità Easing è 'lineare').
  4. Una volta completata l'animazione, il codice nella riga 8 verrà eseguito come callback.
  5. Nella riga 8, verrà generata una nuova velocità, verrà calcolata una nuova posizione e la volare() funzione (quella che stiamo scrivendo in questa sezione) verrà eseguita nuovamente.
  6. Ripeti dal passaggio 1.

Così la volare() la funzione si chiama ripetutamente. Con questa funzione ricorsiva, l'animazione continua all'infinito. Ormai, siamo in grado di scrivere l'intera storia della vita di una particella. Ricorda ancora la seguente catena?

 . This.speed () Newpoint () display () Newpoint () vola ()...;

Rivediamo ciò che fa:

  1. Viene generata una nuova velocità.
  2. Viene calcolato un nuovo set di posizione X-Y.
  3. La particella si presenta nella posizione calcolata nel passaggio 3.
  4. Viene calcolata una nuova posizione.
  5. La particella si sposta nella posizione calcolata nel passaggio 5.
  6. Viene generata una nuova velocità.
  7. Viene calcolato un nuovo set di posizione X-Y.
  8. La particella si sposta nella posizione calcolata al punto 7.
  9. Una volta completata l'animazione, ripetere dal punto 6.

Se questi passi ti sembrano sciocchezze ... Beh, guarda ancora questa figura. Dovresti essere in grado di codificare ogni singolo passaggio ora. E dovresti sapere come organizzare tutte le cose in una struttura orientata agli oggetti. Finalmente l'effetto lucciola è completo.


Conclusione

Ora tutti dovrebbero essere in grado di implementare questo effetto nei propri progetti. Spero che tu abbia una migliore comprensione del Javascript orientato agli oggetti.

La cosa numero uno che adoro di questo effetto è che cambiando le immagini di sfondo e di particelle, è possibile produrre un aspetto e una sensazione completamente diversi. Se vuoi, puoi avere aerei o superman che volano sulla tua pagina web. La tua immaginazione è il limite.

Questo è tutto per questo tutorial. Spero ti sia piaciuto. Grazie per aver letto!


Codice
×