Luo animoitu höyryn tekstivaikutus

Feb 3, 2026
Miten tehdään
Steam text effect

Vaikutusten lisääminen tekstiin voi lisätä kokonaan uuden sitoutumisen ja kiinnostuksen. Vaikutukset, kuten Kineettinen typografia tarttuu katsojan huomion, avun käyttäjäkokemus ja auttaa kertomaan tarinasta, jota kerrotaan. Tekstivaikutus Tehdä ihmeitä Sivusto tuo Web-fontti tarkennusjohtoon linjalla. Lue, miten voit luoda jotain samanlaista.

Saada Hanketiedostot Voit seurata tätä opetusohjelmaa.

01. Aloita HTML-asiakirja

Ensimmäinen askel on määritellä asiakirjarakenne, joka tallentaa HTML-sisällön. Tämä koostuu asiakirjasäiliöstä, joka tallentaa pään ja rungon osiot. Vaikka pääosasto tallentaa musteet ulkoisiin CSS- ja JavaScript-resursseihin, keho tallentaa vaiheessa 02 luotu näkyvä sisältö. 

 ​​& lt;! DocType HTML & GT;
& lt; html & gt;
& lt; pää & gt;
& lt; otsikko & gt; hämärtää tekstiä & lt; / otsikko ja gt;
& lt; Link Rel = "Stylesheet" tyyppi = "Text / CSS" Href = "Styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
  *** Vaihe 2 Tässä
& lt; / body & gt;
& lt; / html & gt;

02. HTML-sisältö

Tämä vaihe määrittää näkyvän HTML-pitoisuuden. Huomaa, miten hämärtymät ovat merkittyjä tekstejä, jotka kaikki sisältyvät säiliöön, jolla on "hämärtyminen" luokka. Tätä luokkaa käyttävät JavaScript viittaamalla tekstin kohteita vaiheessa 03 ja CSS: llä myöhemmissä vaiheissa. 

 ​​& lt; h2 & gt;
  Kurinalaisuus tulee
  & lt; ul class = "hämärtyminen" & gt;
  & lt; li & gt; sitoutuminen & lt; / li & gt;
  & lt; li & gt; sitkeys & lt; / li & gt;
  & lt; li & gt; omistautuminen & lt; / li & gt;
  & lt; li & gt; koulutus & lt; / li & gt;
  & lt; li & gt; aspiraatio & lt; / li & gt;
  & lt; li & gt; koulutus & lt; li & gt;
  & lt; / ul & gt;
& lt; / h2 & gt;

03. Automaattinen animaatioviive

Luo uusi tiedosto nimeltä "code.js". Jokainen hämärän säiliön sisällä oleva kohde on esitettävä kolme sekuntia edellisen kohteen jälkeen. JavaScript käytetään Ainutlaatuisten CSS-määritteiden sovelluksen automatisointiin. Ensimmäinen vaihe tämän on valita kaikki ensimmäisen tason kohteet hämärän säiliön sisällä - sen jälkeen, kun sivu on ladattu. 

 Window.AdDeventListener ("Load", Toiminto () {
  var solmut = document.queryelectectell (". Blur & gt; *");
  *** Vaihe 4 Tässä
});

04. sekuntien määrä

"Silmukkaa käytetään viittausta, joka palautetaan edellisessä vaiheessa" solmujen "muuttujaksi. "For" -silmukan indeksikerrosta käytetään sekuntien määrän laskemiseen animaation viiveen attribuuttiin. Tämän seurauksena kullakin kohteella on viive, joka on kolme sekuntia pidempi kuin edellinen kohde. 

 (var i = 0; i & lt; solmut.length; i ++) {
  solmut [i] .style.AnimationDelay = (i * 3) + "S";
}

05. CSS-hämärtyminen

Luo uusi tiedosto nimeltä "Styles.css". Ensimmäinen askel CSS-esityssääntöjen määrittelyyn käynnistyy kukin tekstikohdasta näkymättömiksi. Käytetään myös animaatiota nimeltä "animaationblur", joka animoi kohteen katselemaan viiden sekunnin ajan. Animaatiotila on asetettava "eteenpäin" niin, että se pysähtyy viimeisellä kehyksellään. 

 .blur & gt; * {
  Opasiteetti: 0;
  Animaatio: AnimateBlur 5S eteenpäin;
}

06. Aloita animaatio

Tässä vaiheessa määritetään ensimmäisen vaiheen 5 hämärän elementtien animaatio. Viittaus "animaationblur" tehdään avainkehysten animaationa. Ensimmäinen kehys "alkaen" asettaa elementit näkyviksi tekstin varjolla - mutta läpinäkyvä tekstin väri. Tämä tuottaa hämärtyneen tekstin vaikutuksen. 

 @keyframes AnimateBlur {
  {
  Opasiteetti: 1;
  Tekstin varjo: 0 0 1EM RGBA (0,0,0, 0,5);
  Väri: RGBA (0,0,0,0);
  }
    *** Vaihe 7 Tässä
}

07. Lopullinen animaatiokehys

Animaation "-kehys määrittelee lopullisen kehyksen, jonka teksti on animoitu. Tämä kehys asettaa tekstin varjon katoamiseksi sekä tekstin väri, joka on täysin näkyvissä. Yhdessä vaiheessa 06 selaimesi lasketaan automaattisesti animaatiokehykset ja '' 'välillä. 

 {
  Opasiteetti: 1;
  Tekstin varjo: 0 0 0px RGBA (0,0,0,0);
  Väri: # 000;
}

Tämä artikkeli ilmestyi alun perin Web Designer Magazine -lehdestä. Tilaa täältä .

Muista - ajattele aina käyttäjää

Generate - the conference for web designers

Kun esittelet fancy-vaikutuksia sivulle, jonka tarkoituksena on olla tarkoitus, sinun on ajateltava käyttökokemusta.Ja tämä on se, mitä freelance etusivu UI -kehittäjä Sara Soueidan paljastaa hänen "käyttämällä CSS (ja SVG) hyvä UX: n puheenvuoron Luo Lontoo 2018 .

Hänen puheenvuorossaan hän aikoo näyttää laajan valikoiman mahdollisuuksia, joita CSS tarjoaa parantaa käyttöliittymien yleistä käyttökokemusta CSS: llä (SVG: n ja JS: n sprinklit täällä).

Varmista, ettet unohda. Hanki lippu nyt.

Aiheeseen liittyvät artikkelit:

  • Luo Wobbly Tekstivaikutus JavaScriptin kanssa
  • Luo hehkuva neoniteksti
  • Kuinka tehdä tekstin tekemistä täydellisesti

Miten tehdään - Suosituimmat artikkelit

Kuinka kääntää kerros Photoshopissa: täydellinen opas

Miten tehdään Feb 3, 2026

Nähdä kaksinkertainen? Tämä kuva on käännetty ja sekoitettu alkuperäiseen (Kuva luotto: tulevaisuus) ..

Rakenna prototyyppejä Adobe XD: llä

Miten tehdään Feb 3, 2026

(Kuva luotto: tulevaisuus) Nykyaikaisessa web- ja sovellusrakenteessa on usein useita kertoja, kun vuorovaikutus ei a..

Luo laattojen materiaali aineen suunnittelija

Miten tehdään Feb 3, 2026

Aine-suunnittelija on erinomainen työkalu kaikenlaisten materiaalien luomiseen 3D-taide . Täällä aion selittä..

Luo kuvattu muotokuva kuvista

Miten tehdään Feb 3, 2026

Olen opiskellut taidetta ja Maalaustekniikat Ja pitkään oli täysin ajatus digitaalista ajatusta. En vain nähny..

Kuinka maalata kaupunkikuva värillä

Miten tehdään Feb 3, 2026

Henkeäsalpaavat näkymät, upeat skylines ja kauniit kaupunkimaisemat tekevät suuria valokuvia, mutta voi olla melko pelottava ..

Kuinka sekoittaa gouache-paletti

Miten tehdään Feb 3, 2026

GuAche on enemmän anteeksiantava kuin akvarelli maali, mutta päätökset, jotka teet aikaisin, voivat silti vaikuttaa muuhun ..

Miten prototyyppi mobiilisovellus Adobe XD: llä

Miten tehdään Feb 3, 2026

Tämä opetusohjelma, jossa voit tehdä mobiilisovelluksen prototyypin Adobe XD: ssä, koottiin yhteen Ado..

Mock Up AR-grafiikka jälkeen vaikutukset

Miten tehdään Feb 3, 2026

Kun vaikutukset vaikuttavat voimakkaita työkaluja, joita voimme käyttää jäljittelemään jäljitellä todellisuutta. Saatat olla tarpeen, jos esimerkiksi halusit tehdä pikivesi näyttä..

Luokat