Creare un effetto di testo a vapore animato

Sep 14, 2025

Come si fa

L'aggiunta di effetti al testo può aggiungere un nuovo livello di coinvolgimento e interesse. Effetti come tipografia cinetica afferrerà l'attenzione di un viste, aiuti esperienza utente E aiuta a raccontare la storia che viene detto. L'effetto del testo sul Fare meraviglie Il sito porta il Web Font. nella linea di messa a fuoco per linea. Continua a leggere per scoprire come ricreare qualcosa di simile.

Ottenere la file di progetto Per aiutare a seguire questo tutorial.

01. Avviare il documento HTML

Il primo passo è definire la struttura del documento che memorizzerà il contenuto HTML. Questo è costituito dal contenitore dei documenti, che memorizza le sezioni della testa e del corpo. Mentre la sezione della testa memorizza gli inchiostri sulle risorse CSS esterne e JavaScript, il corpo memorizza il contenuto visibile creato al punto 02.

 & lt ;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; Titolo & GT; Blur Text & Lt; / Titolo & GT;
& lt; lt; link rel = "stilsheet" type = "testo / css" href = "stili.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; corpo e GT;
  *** Step 2 qui
& lt; / corpo e GT;
& lt; / html & gt;

02. Contenuto HTML.

Questo passaggio definisce il contenuto HTML visibile. Prendi nota di come i testi designati per avere l'effetto sfocatura sono tutti contenuti all'interno di un contenitore che ha la classe 'sfocatura'. Questa classe viene utilizzata da JavaScript per fare riferimento agli elementi del testo al punto 03 e da CSS in fasi successive.

 & lt; H2 & GT;
  Disciplina viene da.
  & lt; ul; ul; ul massima classe = "sfocatura" e GT;
  & lt; li & gt; impegno e lt; / li & gt;
  & lt; li & gt; perseveranza & lt; / li & gt;
  & lt; li & gt; dedicazione & lt; / li & gt;
  & lt; li & gt; formazione e lt; / li & gt;
  & lt; li & gt; aspirazione e lt; / li & gt;
  & lt; li & gt; education & lt; / li & gt;
  & lt; / UL & GT;
& lt; / h2 & gt;

03. Ritardo di animazione automatizzato

Creare un nuovo file chiamato 'code.js'. Ogni elemento all'interno del contenitore della sfocatura deve essere presentato tre secondi dopo l'elemento precedente. JavaScript viene utilizzato per automatizzare l'applicazione di Attributi CSS univoci. Il primo passo di questo è selezionare tutti gli elementi di primo livello all'interno del contenitore della sfocatura - dopo aver caricato la pagina.

 Finestra.AddeventListener ("Carica", funzione () {
  var nodes = document.querySelectorAll (". Blur & GT; *");
  *** Step 4 qui
});

04. Numero di secondi

Un loop 'for' è usato per fare riferimento a ciascun elemento restituito alla variabile 'nodi' nel passaggio precedente. Il contatore dell'indice del loop 'for' viene utilizzato per calcolare il numero di secondi da assegnare all'attributo di ritardo dell'animazione. Di conseguenza, ogni articolo ha un ritardo che è più lungo di tre secondi rispetto all'elemento precedente.

 per (var i = 0; i & lt; nodes.length; i ++) {
  nodi [i] .style.animationdelay = (i * 3) + "s";
}

05. CSS Blur.

Crea un nuovo file chiamato 'stili.css'. Il primo passo per definire le regole di presentazione CSS avvia ciascuno degli elementi del testo come invisibile. Si applica anche un'animazione chiamata 'animationblur' che animerà l'oggetto in vista su una durata di cinque secondi. La modalità di animazione deve essere impostata su 'inoltra' in modo che si ferma sul suo ultimo fotogramma.

 .blur & GT; * {
  Opacità: 0;
  Animazione: Animateblur 5s in avanti;
}

06. Avviare animazione

L'animazione applicata agli elementi 'sfocatura' nel passaggio 5 è definita in questo passaggio. Il riferimento a 'animationblur' è fatto come un'animazione di fotogrammi chiave. Il primo frame "da" imposta gli elementi come visibili con un'ombra di testo - ma con un colore di testo trasparente. Questo è ciò che produce l'effetto del testo sfocato.

 @keyFrames Animateblur {
  a partire dal {
  Opacità: 1;
  Text-Shadow: 0 0 1em RGBA (0,0,0, .5);
  Colore: RGBA (0,0,0,0);
  }
    *** Step 7 qui
}

07. Telaio dell'animazione finale

Il telaio "to" all'interno dell'animazione definisce il frame finale a cui il testo sarà animato. Questa struttura imposta l'ombra del testo da scomparire, insieme a un colore di testo che è completamente visibile. Combinato con il punto 06, i frame dell'animazione tra "da" e "a" saranno calcolati automaticamente dal browser.

 a {
  Opacità: 1;
  Text-Shadow: 0 0 0px RGBA (0,0,0,0);
  Colore: # 000;
}

Questo articolo è stato originariamente apparso nella rivista Web Designer. Iscriviti qui .

Ricorda: pensa sempre all'utente

Generate - the conference for web designers

Quando introducono effetti di fantasia a una pagina ha bisogno di avere uno scopo, devi pensare all'esperienza utente.E questo è ciò che l'ui sviluppatore di Freelance Front-End SARA SARA Sueueidan rivelerà in lei "Usando CSS (e SVG) per il bene della discorso di UX Genera Londra 2018. .

Nella sua discussione mostra una vasta gamma di possibilità che CSS offre di migliorare l'esperienza complessiva dell'utente della tua UI, usando CSS (con spruzzi di SVG e JS qua e là).

Assicurati di non perdere. Ottieni il tuo biglietto ora.

Articoli Correlati:

Creare un effetto testo wobbly con JavaScript
Creare un effetto di testo al neon incandescente
Come rendere il testo rendere perfettamente

Creare un effetto di testo a vapore animato

01. Avviare il documento HTML

02. Contenuto HTML.

03. Ritardo di animazione automatizzato

04. Numero di secondi

05. CSS Blur.

06. Avviare animazione

07. Telaio dell'animazione finale

Ricorda: pensa sempre all'utente

Come si fa - Articoli più popolari

Crea il tuo stilo con solo 4 articoli per la casa (seriamente)

Costruisci un chatbot AI-Powered

Comprendi la lavorazione del linguaggio naturale

14 Punte per flusso di lavoro Zbrush

Aggiungi colori digitali ai disegni a matita

Dipingi come un impressionista

Crea straordinarie trame piastrellabili in Blender

5 consigli per la scultura in doppio tempo rapido

Categorie