Effetto di scrittura Matrix con JavaScript

L’effetto di scrittura della scritta del film di Matrix è un’animazione iconica e facilmente riconoscibile. In questo articolo, impareremo come creare un effetto di scrittura simile utilizzando Javascript.

Per prima cosa, dobbiamo impostare il testo da visualizzare e la velocità di scrittura. Questi valori possono essere definiti all’interno del codice Javascript utilizzando le variabili text e speed, rispettivamente.

Successivamente, dobbiamo ottenere l’elemento HTML in cui visualizzare il testo. Ciò può essere fatto utilizzando la funzione getElementById di Javascript, che ci permette di selezionare un elemento HTML in base al suo identificatore univoco.

Dopo aver ottenuto l’elemento HTML, possiamo utilizzare la funzione type per aggiungere una lettera alla volta al testo. Questa funzione utilizza un loop che aggiunge una lettera alla volta, passando alla prossima parola quando finisce di scrivere l’attuale.

Infine, la funzione type viene chiamata inizialmente per avviare l’animazione di scrittura. La funzione setTimeout viene utilizzata per far attendere un po’ di tempo tra l’aggiunta di ogni lettera, in modo che l’effetto di scrittura sia più realistico.

Con questi passaggi, possiamo creare un effetto di scrittura simile a quello della scritta del film di Matrix utilizzando Javascript. Questo effetto può essere utilizzato per creare animazioni in siti web, giochi o altre applicazioni.

In conclusione, utilizzando il codice Javascript presentato in questo articolo, è possibile creare un effetto di scrittura come nella scritta del film di Matrix. Questo effetto è facile da implementare e può essere personalizzato in base alle esigenze del progetto.

HTML

<div id="matrix-text">
</div>

CSS

body {
  background-color: rgb(0,0,0);
  color: green;
}

JavaScript

// Imposta il testo da visualizzare
const text = ["Wake up, Neo...", "The Matrix has you...", "Follow the white rabbit..."];

// Imposta la velocità di scrittura in millisecondi
const speed = 200;

// Ottieni l'elemento HTML in cui visualizzare il testo
const textElement = document.getElementById("matrix-text");

// Imposta l'indice del testo da visualizzare
let textIndex = 0;

// Imposta l'indice della lettera attuale
let charIndex = 0;

// Crea una funzione per la scrittura del testo
function type() {
  // Aggiungi una lettera al testo
  textElement.innerHTML += text[textIndex].charAt(charIndex);
  
  // Incrementa l'indice della lettera attuale
  charIndex++;
  
  // Se abbiamo scritto l'intera parola, passa alla prossima parola
  if (charIndex >= text[textIndex].length) {
    textIndex++;
    charIndex = 0;
    document.getElementById("matrix-text").innerHTML = "";
  }
  
  // Se abbiamo scritto tutte le parole, ricomincia dall'inizio
  if (textIndex >= text.length) {
    textIndex = 0;
    
  }
  
  // Attendi un po' di tempo e richiama la funzione
  setTimeout(type, speed);
  
 }

// Avvia la funzione di scrittura
type();