Skapa en animerad ångtexteffekt

Sep 12, 2025

Hur

Att lägga till effekter på text kan lägga till en helt ny nivå av engagemang och intresse. Effekter som Kinetisk typografi kommer att ta en titters uppmärksamhet, hjälp användarupplevelse och hjälpa till att berätta den berättelse som får veta. Texteffekten på Göra underverk Webbplatsen bringar webbfont in i fokuslinjen efter rad. Läs vidare för att ta reda på hur man återskapar något liknande.

Få den Projektfiler för att hjälpa till att följa den här handledningen.

01. Initiera HTML-dokument

Det första steget är att definiera dokumentstrukturen som lagrar HTML-innehållet. Detta består av dokumentbehållaren, som lagrar huvud- och kroppssektionerna. Medan huvudsektionen lagrar bläck till de externa CSS- och JavaScript-resurserna, lagrar kroppen det synliga innehållet som skapats i steg 02.

 & lt;! Doktype html & gt;
& lt; html & gt;
& lt; huvud & gt;
& lt; Titel & GT; Blur Text & LT; / Titel & GT;
& lt; länk rel = "stylesheet" typ = "Text / css" href = "stilar.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& LT; / Head & GT;
& lt; kropp & gt;
  *** Steg 2 här
& LT; / Body & GT;
& lt; / html & gt;

02. HTML-innehåll

Detta steg definierar det synliga HTML-innehållet. Notera hur de texter som är utsedda för att bli suddig effekt är alla som finns i en behållare som har "blur" -klassen. Den här klassen används av JavaScript för att referera till textobjekten i steg 03 och av CSS i senare steg.

 & lt; H2 & GT;
  Disciplin kommer från
  & lt; ul klass = "oskärpa" & gt;
  & lt; li & gt; engagemang & lt; / li & gt;
  & lt; li & gt; uthållighet och lt; / li & gt;
  & lt; li & gt; dedication & lt; / li & gt;
  & lt; Li & GT; Training & LT; / Li & GT;
  & lt; li & gt; aspiration & lt; / li & gt;
  & lt; Li & GT; Utbildning & LT; / Li & GT;
  & lt; / ul & gt;
& lt; / h2 & gt;

03. Automatiserad animeringsfördröjning

Skapa en ny fil som heter 'code.js'. Varje objekt i blurbehållaren ska presenteras tre sekunder efter föregående objekt. Javascript används för att automatisera applikationen av unika CSS-attribut. Det första steget i detta är att välja alla förstniv-objekt i blurbehållaren - efter att sidan har laddats.

 Window.Addeventlistener ("ladda", funktion () {
  var nodes = document.queryselectorall (". Blur & GT; *");
  *** Steg 4 här
});

04. Antal sekunder

En "för" slinga används för att referera till varje objekt som returneras till "noder" -variabeln i föregående steg. Indexräknaren för "för" slingan används för att beräkna antalet sekunder för att tilldela animeringsfördröjningsattributet. Som ett resultat har varje objekt en fördröjning som är tre sekunder längre än föregående artikel.

 för (var i = 0; i & lt; nodes.length; i ++) {
  noder [i] .style.animationDelay = (i * 3) + "s";
}

05. CSS-suddighet

Skapa en ny fil som heter 'Styles.css'. Det första steget för att definiera CSS-presentationsreglerna initierar var och en av textposterna som osynliga. En animering som heter 'AnimationBlur' appliceras också som kommer att animera föremålet i synnerhet över en fem sekunders varaktighet. Animationsläget måste vara inställt på "framåt" så att det stannar på sin sista ram.

 .BLUR & GT; * {
  Opacity: 0;
  Animering: AnimateBlur 5s framåt;
}

06. Initiera animering

Animationen som appliceras på "oskärpa" -elementen i steg 5 definieras i detta steg. Referensen till 'AnimationBlur' görs som en nyckelframeter animering. Den första ramen "från" sätter elementen som synliga med en textskugga - men med en genomskinlig textfärg. Detta är det som producerar den suddiga texteffekten.

 @keyframes animateblur {
  från {
  Opacitet: 1;
  Text-Shadow: 0 0 1EM RGBA (0,0,0, .5);
  Färg: RGBA (0,0,0,0);
  }
    *** Steg 7 här
}

07. Slutlig animationsram

"Att" ram i animationen definierar den slutliga ramen som texten kommer att animeras till. Den här ramen ställer in textskuggan för att försvinna, tillsammans med en textfärg som är helt synlig. Kombinerat med steg 06, kommer animationsramarna mellan "från" och "till" automatiskt att beräknas av webbläsaren.

 till {
  Opacitet: 1;
  Text-Shadow: 0 0 0px rgba (0,0,0,0);
  Färg: # 000;
}

Denna artikel uppträdde ursprungligen i webbdesignermagasin. Prenumerera här .

Kom ihåg - tänk alltid på användaren

Generate - the conference for web designers

När du introducerar snygga effekter på en sida måste det ha ett syfte, du måste tänka på användarupplevelsen.Och det här är vad freelance front-end ui utvecklare Sara Soueidan kommer att avslöja i henne "med hjälp av CSS (och SVG) för det bästa av UX-talet på Generera London 2018 .

I hennes samtal kommer hon att visa ett brett utbud av möjligheter som CSS erbjuder för att förbättra den totala användarupplevelsen av din UI, med hjälp av CSS (med sprinkles av SVG och JS här och där).

Se till att du inte saknar dig. Få din biljett nu.

Relaterade artiklar:

Skapa en wobbly texteffekt med javascript
Skapa en glödande neon text effekt
Hur man gör text gör perfekt

Skapa en animerad ångtexteffekt

01. Initiera HTML-dokument

02. HTML-innehåll

03. Automatiserad animeringsfördröjning

04. Antal sekunder

05. CSS-suddighet

06. Initiera animering

07. Slutlig animationsram

Kom ihåg - tänk alltid på användaren

Hur - Mest populära artiklar

Adobe Fresco Tutorial: Skapa ett porträtt i målningsappen

Få mer från Artrage 6: Topptips för att öka ditt arbetsflöde

Hopp Start Reagera Native med Expo

Skapa en animerad 3D-texteffekt

Hur man målar underbara miniatyrer

Skapa interaktiva 3D-bilder med tre.js

Design SVG-grafik i din webbläsare

Hur man kombinerar skulpterade och målade förskjutningskartor

Kategorier