Opret en animeret damptekst effekt

Jan 29, 2026

hvordan

Tilføjelse af effekter til tekst kan tilføje et helt nyt niveau af engagement og interesse. Virkninger som f.eks kinetisk typografi. vil få fat i en seer opmærksomhed, hjælp brugererfaring og hjælpe med at fortælle historien, der bliver fortalt. Tekstvirkningen på Gør vidundere webstedet bringer Web Font. i fokus linje ved linje. Læs videre for at finde ud af, hvordan du genskabe noget lignende.

Hent Projektfiler for at hjælpe med at følge denne vejledning.

01. Start HTML-dokument

Det første skridt er at definere dokumentstrukturen, der gemmer HTML-indholdet. Dette består af dokumentbeholderen, som gemmer hoved- og kropsafsnittene. Mens hovedafsnittet gemmer blæk til de eksterne CSS- og JavaScript-ressourcer, gemmer kroppen det synlige indhold, der er oprettet i trin 02.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; hoved & gt;
& lt; titel & gt; blur tekst & lt; / titel & 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;
  *** trin 2 her
& lt; / body & gt;
& lt; / HTML & GT;

02. HTML-indhold

Dette trin definerer det synlige HTML-indhold. Vær opmærksom på, hvordan teksterne udpeget til at have sløret effekt er alle indeholdt i en beholder, der har 'blur' klassen. Denne klasse bruges af JavaScript til at referere til tekstelementerne i trin 03 og af CSS i senere trin.

 & lt; h2 & gt;
  Disciplin kommer fra
  & lt; ul klasse = "blur" & gt;
  & lt; li & gt; engagement & lt; / li & gt;
  & lt; li & gt; udholdenhed & lt; / li & gt;
  & lt; li & gt; dedikation & lt; / li & gt;
  & lt; li & gt; træning & lt; / li & gt;
  & lt; li & gt; aspiration & lt; / li & gt;
  & lt; li & gt; uddannelse & lt; / li & gt;
  & lt; / ul & gt;
& lt; / h2 & gt;

03. Automatiseret animationsforsinkelse

Opret en ny fil kaldet 'CODE.JS'. Hvert element inde i blur beholderen skal præsenteres tre sekunder efter det forrige element. JavaScript bruges til at automatisere anvendelsen af unikke CSS-attributter. Det første trin i dette er at vælge alle de første niveauer inde i blur beholderen - efter at siden er indlæst.

 Window.AddeventListener ("Load", funktion () {
  VAR NODES = DOCUMENT.QUERYSELECTORALL (". Blur & GT; *");
  *** trin 4 her
});

04. Antal sekunder

A 'for' loop bruges til at henvise hvert element, der returneres til 'NODES' -variablen i det foregående trin. Indekset tælleren for 'for' loop bruges til at beregne antallet af sekunder for at tildele animationsforsinkelsesattributten. Som følge heraf har hver vare en forsinkelse, der er tre sekunder længere end det foregående emne.

 for (VaR I = 0; I & LT; Nodes.Længde; I ++) {
  noder [i]. Style.AnimationDelay = (I * 3) + "S";
}

05. CSS Blur.

Opret en ny fil kaldet 'Styles.css'. Det første skridt til at definere CSS-præsentationsreglerne indleder hver af tekstelementerne som usynlige. En animation kaldet 'AnimationBlur' anvendes også, der vil animere varen til visning over en fem sekunders varighed. Animationstilstanden skal indstilles til 'Forward', så den stopper på sin sidste ramme.

 .blur & gt; * {
  Opacitet: 0;
  Animation: Animeblur 5S fremad;
}

06. Start animation

Animationen anvendt på 'blur' elementerne i trin 5 er defineret i dette trin. Henvisningen til 'AnimationBlur' er lavet som en keyframes animation. Den første ramme 'fra' sætter elementerne så synlige med en tekstskygge - men med en gennemsigtig tekstfarve. Dette er det, der producerer den slørede tekstffekt.

 @Keyframes animateblur {
  fra {
  Opacitet: 1;
  Tekstskygge: 0 0 1EM RGBA (0,0,0, .5);
  Farve: RGBA (0,0,0,0);
  }
    *** Trin 7 her
}

07. Endelig animationsramme

Den 'til' ramme i animationen definerer den endelige ramme, som teksten vil blive animeret til. Denne ramme indstiller tekstskyggen for at forsvinde sammen med en tekstfarve, der er fuldt synlig. Kombineret med trin 06 beregnes animationsrammerne mellem 'fra' og 'til' automatisk af browseren.

 til {
  Opacitet: 1;
  Tekstskygge: 0 0 0px RGBA (0,0,0,0);
  Farve: # 000;
}

Denne artikel optrådte oprindeligt i Web Designer Magazine. Abonner her .

Husk - tænk altid på brugeren

Generate - the conference for web designers

Når du introducerer fancy effekter på en side, skal det have et formål, du skal tænke på brugeroplevelsen.Og det er, hvad freelance front-end UI udvikler Sara Soueidan vil afsløre i hendes 'ved hjælp af CSS (og SVG) til det gode af UX' snak på Generere London 2018. .

I sin tale vil hun vise en bred vifte af muligheder, som CSS tilbyder at forbedre den samlede brugeroplevelse af din UI, ved hjælp af CSS (med SVG og JS og derinde.

Sørg for, at du ikke går glip af. Få din billet nu.

Relaterede artikler:

Opret en wobbly tekst effekt med JavaScript
Opret en glødende neon tekst effekt
Sådan laver du tekstgender perfekt

Opret en animeret damptekst effekt

01. Start HTML-dokument

02. HTML-indhold

03. Automatiseret animationsforsinkelse

04. Antal sekunder

05. CSS Blur.

06. Start animation

07. Endelig animationsramme

Husk - tænk altid på brugeren

hvordan - Mest populære artikler

Sådan tegner du Asuka fra Neon Genesis Evangelion

Sådan tegner du en arm

Brug negativ plads til at tegne bedre hænder

Sådan Model Concept Art i Cinema 4D

Brug WordPress som hovedløs CMS

Opret en travl by scene i Illustrator

Sådan designe en promo til et imaginært mærke

Sådan master hudskygger i 3D

Kategorier