Creați un efect de text animat cu abur

Jan 29, 2026

să

Adăugarea efectelor la text poate adăuga un nou nivel de angajament și interes. Efecte precum Tipografie cinetică va atrage atenția unui spectator, a ajutorului experiența utilizatorului și să vă ajute să spuneți povestea care i se spune. Efectul textului asupra Face minuni Site-ul aduce Web font. în linia de focalizare pe linie. Citiți mai departe pentru a afla cum să recreați ceva similar.

Obține Fișiere de proiect. pentru a vă ajuta să urmați acest tutorial.

01. Inițiați documentul HTML

Primul pas este de a defini structura documentului care va stoca conținutul HTML. Aceasta constă în containerul de documente, care stochează secțiunile capului și corpului. În timp ce secțiunea Head Stores cerneluri la resursele CSS și JavaScript extern, organismul stochează conținutul vizibil creat în etapa 02.

 și lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; blur text & lt; / titlu & gt;
& lt; link rel = "Stylesheet" Type = "Text / css" href = "stiluri.css" / & gt;
& lt; script src = "code.js" & gt; / lt; / script & gt;
& lt; / head & gt;
& lt; corp & gt;
  *** Pasul 2 aici
& lt; / corp & gt;
& lt; / html & gt;

02. Conținutul HTML.

Acest pas definește conținutul HTML vizibil. Luați notă de modul în care textele desemnate să aibă efectul neclarilor sunt incluse într-un container care are clasa "Blur". Această clasă este utilizată de JavaScript pentru a face referire la elementele de text din pasul 03 și prin CSS în pașii ulteriori.

 & lt; h2 & gt;
  Disciplina vine de la
  & lt; ul clasa = "blur" & gt;
  "Li & gt; angajament & lt; / li & gt;
  "Li & gt; perseverență și lit; / li & gt;
  & Li & gt; Dedicare & Lt; / Li & Gt;
  "Li & gt; instruire & lt; / li & gt;
  și Li & gt; aspirație & lt; / li & gt;
  & Li & gt; educație & lt; / li & gt;
  & lt; / ul & gt;
& lt; / h2 & gt;

03. Întârzierea automată a animației

Creați un fișier nou numit "Code.js". Fiecare element din interiorul recipientului Blur trebuie prezentat trei secunde după elementul anterior. JavaScript este folosit pentru a automatiza aplicarea atributelor CSS unice. Primul pas al acestui lucru este de a selecta toate elementele de primul nivel din interiorul containerului Blur - după ce pagina a fost încărcată.

 fereastră.addeventlistener ("încărcare", funcția () {
  var noduri = document.querysectorall ("blur & gt; *");
  *** Pasul 4 aici
});

04. Numărul de secunde

O buclă "pentru" este utilizată pentru a face referire la fiecare element returnat la variabila "nodurilor" în pasul anterior. Contorul index al buclei "pentru" este utilizat pentru a calcula numărul de secunde pentru a atribui atributul de întârziere animație. Ca rezultat, fiecare element are o întârziere cu trei secunde mai mult decât elementul anterior.

 pentru (var i = 0; i & lt; noduri.Length; I ++) {
  noduri [i] .Style.animationdelay = (i * 3) + "s";
}

05. CSS Blur.

Creați un fișier nou numit "Styles.Css". Primul pas pentru definirea regulilor de prezentare CSS inițiază fiecare dintre elementele de text ca fiind invizibile. O animație numită "AnimationBlur" se aplică, de asemenea, care va anima elementul în vedere pe o durată de cinci secunde. Modul de animație trebuie să fie setat la "Redirecționări", astfel încât să se oprească pe ultimul său cadru.

 .blur & gt; * {{
  Opacitate: 0;
  Animație: Animateblur 5s înainte;
}

06. Inițierea animației

Animația aplicată elementelor "Blur" din etapa 5 sunt definite în acest pas. Referința la "AnimationBlur" este făcută ca o animație cheie. Primul cadru "de la" stabilește elementele ca fiind vizibile cu o umbră de text - dar cu o culoare textului transparent. Aceasta este ceea ce produce efectul de text neclar.

 @kekeyframes Animateblur {
  de la {
  Opacitate: 1;
  Text-umbra: 0 0 1em RGBA (0,0,0, .5);
  Culoare: RGBA (0,0,0,0);
  }
    *** Pasul 7 Aici
}

07. Cadrul final de animație

Cadrul "To" din Animație definește cadrul final pe care textul va fi animat. Acest cadru stabilește umbra textului să dispară, împreună cu o culoare textului care este pe deplin vizibilă. Combinat cu pasul 06, cadrele de animație între "de la" și "la" vor fi calculate automat de browser.

 la {
  Opacitate: 1;
  Text-umbra: 0 0 0px RGBA (0,0,0,0);
  Culoare: # 000;
}

Acest articol a apărut inițial în revista Web Designer. Abonați-vă aici .

Amintiți-vă - gândiți întotdeauna la utilizator

Generate - the conference for web designers

Când introduceți efecte fantezie la o pagină, trebuie să aveți un scop, trebuie să vă gândiți la experiența utilizatorului.Și acesta este ceea ce dezvoltatorul Freelance Front-end UI va fi dezvăluind în ea "folosind CSS (și SVG) pentru binele lui UX" Generați Londra 2018. .

În discuția ei va arăta o gamă largă de posibilități pe care CSS le oferă pentru a îmbunătăți experiența generală a utilizatorului UI, folosind CSS (cu stropi de SVG și JS aici și acolo).

Asigurați-vă că nu pierdeți. Ia-ți biletul acum.

Articole similare:

Creați un efect de text wobbly cu JavaScript
Creați un efect de text neon strălucitor
Cum de a face textul face perfect

Creați un efect de text animat cu abur

01. Inițiați documentul HTML

02. Conținutul HTML.

03. Întârzierea automată a animației

04. Numărul de secunde

05. CSS Blur.

06. Inițierea animației

07. Cadrul final de animație

Amintiți-vă - gândiți întotdeauna la utilizator

să - Cele mai populare articole

Cum să accelerați și să optimizați site-urile WordPress

Adăugați filtre SVG cu CSS

Obțineți mai multe din grafit cu aceste sfaturi

Animați svg cu JavaScript

Creați un interior primitor folosind linia de artă

Cum se creează active digitale

Creați gresie ornamentată în designer de substanțe

Creați un efect de stropire în Realflow

Categorii