Opprett en animert dampteksteffekt

Sep 14, 2025
hvordan
Steam text effect
[1. 3]

Legge til effekter på tekst kan legge til et helt nytt nivå av engasjement og renter. Effekter som kinetisk typografi vil ta en seer oppmerksomhet, hjelp Brukererfaring Og hjelp til å fortelle historien som blir fortalt. Tekst-effekten på Gjør underverkene Nettstedet bringer den Web Font. inn i fokuslinjen for linje. Les videre for å finne ut hvordan du gjenoppretter noe lignende.

Hent Prosjektfiler for å bidra til å følge denne opplæringen.

01. Start HTML-dokument

Det første trinnet er å definere dokumentstrukturen som vil lagre HTML-innholdet. Dette består av dokumentbeholderen, som lagrer hodet og kroppsdelene. Mens hoveddelen lagrer blekk til de eksterne CSS- og JavaScript-ressursene, lagrer kroppen det synlige innholdet som er opprettet i trinn 02. 

 ​​& lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; blur text & lt; / title & gt;
& lt; link rel = "Stylesheet" type = "tekst / css" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
  *** Trinn 2 her
& lt; / body & gt;
& lt; / html & gt;

02. HTML-innhold

Dette trinnet definerer det synlige HTML-innholdet. Legg merke til hvordan teksten som er angitt for å få den uskarpe effekten, er alle inneholdt i en beholder som har "uskarphet" -klassen. Denne klassen brukes av JavaScript for å referere til tekstelementene i trinn 03, og av CSS i senere trinn. 

 ​​& lt; h2 & gt;
  Disiplin kommer fra.
  & lt; ul klasse = "uskarphet" & gt;
  & lt; li & gt; engasjement & lt; / li & gt;
  & lt; Li & GT; utholdenhet & lt; / li & gt;
  & lt; li & gt; dedikasjon & lt; / li & gt;
  & lt; LI & GT; trening & lt; / li & gt;
  & lt; li & gt; aspiration & lt; / li & gt;
  & lt; LI & GT; utdanning & lt; / li & gt;
  lt; / ul & gt;
& lt; / h2 & gt;

03. Automatisert animasjonsforsinkelse

Opprett en ny fil kalt 'Code.js'. Hvert element i den uskarpe beholderen skal presenteres tre sekunder etter det forrige elementet. JavaScript brukes til å automatisere anvendelsen av unike CSS-attributter. Det første trinnet i dette er å velge alle de første nivåene i den uskarpe beholderen - etter at siden er lastet inn. 

 window.addeventlistener ("last", funksjon () {
  var noder = document.queySelectorAll (". Blur & gt; *");
  *** Trinn 4 her
});

04. Antall sekunder

A 'for' Loop brukes til å referere til hvert element returnert til 'noder' variabelen i forrige trinn. Indekselleren på 'for' sløyfen brukes til å beregne antall sekunder for å tilordne til animasjonsforsinkelsesattributtet. Som et resultat har hvert element en forsinkelse som er tre sekunder lenger enn det forrige elementet. 

 for (var i = 0; i & lt; noder.length; i ++) {
  noder [i] .style.animationdelay = (I * 3) + "s";
}

05. CSS Uklar

Opprett en ny fil kalt 'Styles.css'. Det første trinnet for å definere CSS-presentasjonsreglene initierer hver av tekstelementene som usynlige. En animasjon som heter 'AnimationBlur', brukes også som vil animere varen til visning over en fem sekunders varighet. Animasjonsmodus må settes til "fremover" slik at den stopper på sin siste ramme. 

 .blur & gt; * {
  opasitet: 0;
  Animasjon: AnimateBlur 5s fremover;
}

06. Start animasjon

Animasjonen som brukes på "uskarpe" -elementene i trinn 5, er definert i dette trinnet. Henvisningen til 'AnimationBlur' er laget som en keyframes animasjon. Den første rammen "fra" setter elementene som synlige med en tekstskygge - men med en gjennomsiktig tekstfarge. Dette er det som gir den uskarpe tekst-effekten. 

 @keyframes animateblur {
  fra {
  opasitet: 1;
  Tekstskygge: 0 01 EM RGBA (0,0,0, .5);
  Farge: RGBA (0,0,0,0);
  }
    *** Trinn 7 her
}

07. Endelig animasjonsramme

Den "til" -rammen i animasjonen definerer den endelige rammen som teksten vil bli animert til. Denne rammen setter tekstskyggen for å forsvinne, sammen med en tekstfarge som er helt synlig. Kombinert med trinn 06, vil animasjonsrammene mellom 'fra' og 'til' bli automatisk beregnet av nettleseren. 

 til {
  opasitet: 1;
  Tekstskygge: 0 0 0PX RGBA (0,0,0,0);
  Farge: # 000;
}

Denne artikkelen oppstod opprinnelig i Web Designer Magazine. Abonner her .

Husk - tenk alltid på brukeren

Generate - the conference for web designers

Når du introduserer fancy effekter på en side, må den ha en hensikt, du må tenke på brukeropplevelsen.Og dette er hva Freelance Front-end Ui Developer Sara Soueidan vil bli avslørende i hennes "ved hjelp av CSS (og SVG) for UX 'Talk på Generer London 2018. .

I hennes snakk skal hun vise et bredt spekter av muligheter som CSS tilbyr for å forbedre den generelle brukeropplevelsen av din brukergrensesnitt, ved hjelp av CSS (med sprinkler på SVG og JS her og der).

Pass på at du ikke går glipp av det. Få din billett nå.

Relaterte artikler:

  • Opprett en wobbly tekst-effekt med JavaScript
  • Lag en glødende neon tekst effekt
  • Hvordan lage tekst gjengivelse perfekt

hvordan - Mest populære artikler

10 måter å forbedre din 3D anatomi

hvordan Sep 14, 2025

[1. 3] (Bilde Kreditt: Ryan Kingslien) Gjenoppretter den menneskelige figuren er en av de tøffeste utfordringene kuns..

10 fantastiske ting du kan gjøre med lag

hvordan Sep 14, 2025

[1. 3] Lag er det som gjør at du kan bygge et prosjekt fra de tidlige grunnlagene til de ferdige detaljene. Det er vanskelig å t..

Opprett et enkelt fargediagram

hvordan Sep 14, 2025

Komme til grep med fargeteori kan virke litt for mye som å lære matematikk eller vitenskap. Du kan føle at du bare vil være kreativ og uttrykke deg selv, ikke trene beregni..

Hvordan designe isometrisk typografi

hvordan Sep 14, 2025

[1. 3] Perspektiv er alt i design. Hvis noe du har tegnet, har et perfekt perspektiv, vil det hjelpe arbeidet ditt til å se mer r..

Hvordan bygge en fullside nettside i vinkel

hvordan Sep 14, 2025

Side 1 av 4: Side 1 Side 1 [1. 3] Side 2 [1. 3] Side 3 ..

Hvordan gjøre en fotorealistisk himmel

hvordan Sep 14, 2025

[1. 3] For denne opplæringen bruker vi Vue Xstream. å skape en himmel full av skyer. Mens du kunne velge å gjens..

Hvordan lage wordpress nettsiden flerspråklig

hvordan Sep 14, 2025

[1. 3] I de 10 beste språkene som brukes på internett, engelsk rangerer først , med nesten 950 millioner brukere..

Oppdag stilen og substansen av typografi

hvordan Sep 14, 2025

Beslutninger, beslutninger, beslutninger ... Hvis det er et viktig aspekt i prosessen med å jobbe med type, er det at designeren eller typografen må gjøre en hel rekke avgjørelser før du..

Kategorier