Maak een geanimeerd stoomtekst-effect

Feb 2, 2026

Procedures

Effecten toevoegen aan tekst kan een geheel nieuw niveau van verloving en interesse toevoegen. Effecten zoals kinetische typografie zal de aandacht van een kijker grijpen, hulp gebruikerservaring en help het verhaal te vertellen dat wordt verteld. Het teksteffect op de Wonderen doen Site brengt de weblettertype in focuslijn per regel. Lees verder om erachter te komen hoe je iets vergelijkbaars kunt recreëren.

Pak de Projectbestanden Om deze tutorial te helpen volgen.

01. Initiëren HTML-document

De eerste stap is om de documentstructuur te definiëren die het HTML-gehalte opslaan. Dit bestaat uit de documentcontainer, die de hoofd- en lichaamsecties opslaat. Terwijl het hoofdgedeelte inkten opslaat naar de externe CSS- en Javascript-bronnen, slaat het lichaam de zichtbare inhoud op die in stap 02 is gemaakt.

 & LT;! DOCTYPE HTML & GT;
& lt; html & gt;
& LT; HOOFD & 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; / HOOFD & GT;
& LT; BODY & GT;
  *** Stap 2 hier
& LT; / BODY & GT;
& LT; / HTML & GT;

02. HTML-inhoud

Deze stap definieert het zichtbare HTML-gehalte. Noteer hoe de teksten die het onscherpeffect hebben aangewezen, allemaal aanwezig zijn in een container die de 'blur'-klasse heeft. Deze klasse wordt door JavaScript gebruikt om de tekstitems in stap 03 te verwijzen, en door CSS in latere stappen.

 & lt; H2 & GT;
  Discipline komt van
  & LT; UL-klasse = "Blur" & GT;
  & lt; li & gt; commitment & lt; / li & gt;
  & LT; LI & GT; Perseverancier & LT; / LI & GT;
  & LT; LI & GT; DEDIFICATIE & LT; / LI & GT;
  & LT; LI & GT; TRAINING & LT; / LI & GT;
  & LT; LI & GT; Aspiration & LT; / LI & GT;
  & LT; LI & GT; ONDERWIJS & LT; / LI & GT;
  & LT; / UL & GT;
& LT; / H2 & GT;

03. Geautomatiseerde animatievertraging

Maak een nieuw bestand met de naam 'Code.js'. Elk item in de blur-container moet drie seconden na het vorige artikel worden gepresenteerd. JavaScript wordt gebruikt om de toepassing van unieke CSS-attributen te automatiseren. De eerste stap hiervan is om alle items op het eerste niveau in de vervagingscontainer te selecteren - nadat de pagina is geladen.

 Window.AddeventListener ("Load", functie () {
  var-knooppunten = document.QuerySelectectorAlle (". Blur & GT; *");
  *** Stap 4 hier
});

04. Aantal seconden

A 'Voor' lus wordt gebruikt om elk item te verwijzen op elk item dat is teruggestuurd naar de variabele 'knooppunten' in de vorige stap. De indexteller van de 'for'-lus wordt gebruikt om het aantal seconden te berekenen om toe te wijzen aan het attribuut Animatie. Als gevolg hiervan heeft elk item een vertraging die drie seconden langer is dan het vorige artikel.

 Want (var i = 0; i & lt; knooppunten.lengte; i ++) {
  knooppunten [I] .style.animationDelay = (i * 3) + "S";
}

05. CSS Blur

Maak een nieuw bestand met de naam 'Styles.css'. De eerste stap voor het definiëren van de CSS-presentatieregels initieert elk van de tekstitems als onzichtbaar. Een animatie genaamd 'Animationblur' wordt ook toegepast die het item in zicht op een duur van de vijf seconden in beeld wordt gegeven. De animatiemodus moet worden ingesteld op 'Forwards', zodat het op het laatste frame stopt.

. Blur & GT;
  Dekking: 0;
  Animatie: Animateblad 5s Forwards;
}

06. Initiëren animatie

De animatie die wordt toegepast op de 'blur'-elementen in stap 5 zijn in deze stap gedefinieerd. De verwijzing naar 'animationblur' wordt gemaakt als een keyframes-animatie. Het eerste frame 'van' stelt de elementen in als zichtbaar met een tekstschaduw - maar met een transparante tekstkleur. Dit is wat het wazig teksteffect oplevert.

 @Keyframes animateblur {
  van {
  Dekking: 1;
  Text-shadow: 0 0 1em RGBA (0,0,0, .5);
  Kleur: RGBA (0,0,0,0);
  
    *** Stap 7 hier
}

07. Finale animatieframe

Het 'to'-frame binnen de animatie definieert het uiteindelijke frame dat de tekst wordt geanimeerd. Dit frame stelt de tekstschaduw in om te verdwijnen, samen met een tekstkleur die volledig zichtbaar is. Gecombineerd met stap 06, worden de animatieframes tussen 'van' en 'naar' automatisch door de browser berekend.

 tot {
  Dekking: 1;
  Tekst-schaduw: 0 0 0PX RGBA (0,0,0,0);
  Kleur: # 000;
}

Dit artikel verscheen oorspronkelijk in Web Designer Magazine. Abonneer hier

Vergeet niet - denk altijd aan de gebruiker

Generate - the conference for web designers

Bij het introduceren van mooie effecten op een pagina moet het doel hebben, moet u denken aan de gebruikerservaring.En dit is wat freelance front-end ui-ontwikkelaar Sara Soueidan zal onthullen in haar 'het gebruik van CSS (en SVG) voor het welzijn van UX' Talk at Genereer London 2018

In haar gesprek gaat ze een breed scala aan mogelijkheden tonen die CSS biedt om de algehele gebruikerservaring van je gebruikersinterface te verbeteren, met behulp van CSS (met hagelslag van SVG en JS hier en daar).

Zorg dat je het niet mag missen. Haal nu je ticket.

Gerelateerde artikelen:

Maak een wiebelig teksteffect met JavaScript
Maak een gloeiend neon-tekst-effect
Hoe de tekst perfect maken

Maak een geanimeerd stoomtekst-effect

01. Initiëren HTML-document

02. HTML-inhoud

03. Geautomatiseerde animatievertraging

04. Aantal seconden

05. CSS Blur

06. Initiëren animatie

07. Finale animatieframe

Vergeet niet - denk altijd aan de gebruiker

Procedures - Meest populaire artikelen

4 stappen voor het gebruik van variabele lettertypen

Bouw terrein in Houdini 17

Hoe een progressieve web-app te bouwen

Master The Mes Tool

Hoe geluid in een schilderij overbrengen

Maak realistische planten in Cinema 4D

Wat is nieuw in Angular 4?

Maak stijlframes in Photoshop

Categorieën