Hozzon létre egy animált Steam szöveghatást

Sep 12, 2025

kézikönyv

A szöveghez való hatások hozzáadása hozzáadhat egy teljesen új szintű elkötelezettséget és érdeklődést. Olyan hatások, mint például kinetikus tipográfia megragadja a néző figyelmét, támogatását felhasználói tapasztalat és segítsen elmondani a történetet, amit mondanak. A szöveg hatása a Csodák Az oldal hozza a web betűtípus a fókuszsorba soronként. Olvassa el, hogy megtudja, hogyan kell újra létrehozni valami hasonlóat.

Kap Projektfájlok hogy segítsen követni ezt a bemutatót.

01. HTML dokumentum kezdeményezése

Az első lépés az a dokumentumszerkezet meghatározása, amely tárolja a HTML-tartalmat. Ez a dokumentumtartályból áll, amely tárolja a fej- és testrészeket. Míg a fejrész tintákat tárolja a külső CSS és JavaScript erőforrásokhoz, a test tárolja a 02 lépésben létrehozott látható tartalmat.

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; elmosódott szöveg & lt; / title & gt;
& link rel = "stylesheet" type = "szöveg / css" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; test & gt;
  *** 2. lépés
& lt; / test & gt;
& lt; / html & gt;

02. HTML tartalom

Ez a lépés meghatározza a látható HTML-tartalmat. Tudomásul veszi, hogy az elmosódott hatásnak kijelölt szövegek mindegyike olyan tartályban van, amely a "elmosódott" osztályban van. Ezt az osztályt a JavaScript használja, hogy hivatkozzon a 03 lépésben szereplő szöveges elemekre, valamint a CSS-re a későbbi lépésekben.

 & lt; h2 & gt;
  Fegyelem származik
  & lt; ul class = "blur" & gt;
  & li & gt; elkötelezettség & lt; / li & gt;
  & li & gt; kitartás & lt; / li & gt;
  & li & gt; Dedikáció & lt; / li & gt;
  & li & gt; képzés & lt; / li & gt;
  & li & gt; aspiráció & lt; / li & gt;
  & li & gt; oktatás & lt; / li & gt;
  & lt; / ul & gt;
& lt; / h2 & gt;

03. Automatizált animációs késedelem

Hozzon létre egy "kód.js" nevű új fájlt. A Blur Container belsejében lévő minden elemet az előző elem után három másodperccel kell bemutatni. A JavaScript az egyedülálló CSS attribútumok alkalmazásának automatizálására szolgál. Ennek első lépése az, hogy az elmosódott konténer belsejében lévő első szintű elemek közül válasszuk ki - az oldal betöltése után.

 ablak.addeventlistener ("terhelés", funkció () {
  var csomópontok = dokumentum.QuerySelectorall (". Blur & gt; *");
  *** 4. lépés itt
});

04. másodpercek száma

A "for" hurok az egyes elemek hivatkozására szolgál az előző lépésben az "csomópontok" változóhoz. A "for" hurok indexszámlálója az animációs késleltetési attribútumhoz való hozzárendeléshez szükséges másodpercek számát használják. Ennek eredményeként minden elemnek késedelme van, amely három másodperccel hosszabb, mint az előző tétel.

 a (var i = 0; i & lt; nodes.lengnth, i ++) {
  csomópontok [i] .style.AnimationDelay = (I * 3) + "s";
}

05. CSS elmosódása

Hozzon létre egy új fájlt "styles.css". A CSS-prezentációs szabályok meghatározásának első lépése megindítja az egyes szöveges elemeket láthatatlannak. Az "Animationblur" nevű animáció is alkalmazható, amely az elemet öt másodperces időtartamra nézzen. Az animációs módot úgy kell beállítani, hogy "előre" legyen, így megáll az utolsó keretén.

 .blur & gt; * {
  Opacity: 0;
  Animáció: Animateblur 5s előre;
}

06. Animáció kezdeményezése

Az 5. lépésben az "elmosódott" elemekre alkalmazott animáció ebben a lépésben van meghatározva. Az "Animationblur" hivatkozás kulcsfokozatú animációként történik. Az első keret "-ből" állítja be az elemeket olyan szöveges árnyékkal, de átlátszó szöveges színnel. Ez az, ami az elmosódott szöveghatást eredményezi.

 @keyframes animateblur {
  tól től {
  Opacity: 1;
  Szöveg-árnyék: 0 0 1EM RGBA (0,0,0, 0,5);
  Szín: RGBA (0,0,0,0);
  }
    *** 7. lépés itt
}

07. Végső animációs keret

Az animáción belüli "-" keret meghatározza a végső keret, hogy a szöveg animált. Ez a keret beállítja a szöveg árnyékát, hogy eltűnjön, és egy teljesen látható szöveges színnel. Kombinált lépéssel 06, az animációs képkockák közötti „a” és „az” automatikusan kiszámítja a böngésző.

 {
  Opacity: 1;
  Szöveg árnyék: 0 0 0PX RGBA (0,0,0,0);
  Szín: # 000;
}

Ez a cikk eredetileg megjelent a Web Designer magazinban. Iratkozzon fel itt .

Ne feledje - mindig gondolj a felhasználóra

Generate - the conference for web designers

A bevezetendőcifra effektegy oldalraakkorszüksége van egycélra, akkorazon kell gondolkodnunka felhasználói élményt.Ésez az, amitszabadúszófront-endUIfejlesztőSaraSoueidanleszfelfedveaz ő„CSS(ésSVG)a jóUX”talk London 2018 .

Az őbeszéljenőfog mutatnialehetőségek széles körét, hogy a CSSajánlatokjavítja az általánosfelhasználói élményafelhasználói felület, a CSS(hintiSVG ésJSitt-ott).

Győződjön meg róla, hogy nem hagyja ki. Szerezd meg jegyét most.

Kapcsolódó cikkek:

Hozzon létre egy Wobbly szöveghatást a JavaScript segítségével
Hozzon létre egy izzó neon szöveghatást
Hogyan készítsünk tökéletes szöveget

Hozzon létre egy animált Steam szöveghatást

01. HTML dokumentum kezdeményezése

02. HTML tartalom

03. Automatizált animációs késedelem

04. másodpercek száma

05. CSS elmosódása

06. Animáció kezdeményezése

07. Végső animációs keret

Ne feledje - mindig gondolj a felhasználóra

kézikönyv - Most Popular Articles

Hogyan szerkeszthet egy videót a Tiktok-on

Hozzon létre egy 3D-s tájat 6 egyszerű lépésben

A Chatbot tapasztalat megtervezése

Hozzon létre egy vektoros elmozdulási mesh ecsetet

13 tipp a VR Gaming World készítéséhez

Mock up az AR grafikákkal a hatásokkal

Hozzon létre egy alacsony poli tapétát C4D-ben

Hogyan juthat el többet a digitális textúráktól

Kategóriák