Kuidas luua peent animeeritud teksti avasid

Kas olete kunagi näinud peent teksti avanemisi ja mõelnud, kuidas need tekkisid?

Neid on seal nii palju ja neid on praktiliselt võimatu selgitada.

Valime siiski näite ja lubage mul näidata, kuidas seda uuesti luua.

Ma tegin juba valiku ja siin on, mida me ehitame:

Demo

See on tekst, mis avab fiktiivse loomeagentuuri. Tulemusi saate vaadata siit.

Kas näete välku, eks? Samuti näete, kuidas animatsioon jaguneb - kogu teksti korraga animeerimise asemel on iga tekst tekstis ajastatud erinevalt?

Näitan teile, kuidas neid uuesti luua.

Pange naeratus peale. Sa armastad seda!

Sissejuhatus

Kellelegi ei meeldi kole märgistus. Tegelikult ei kirjuta me palju juurdehindlusi. Teeme selle animatsiooni lihtsalt uuesti.

Esiteks haarake kapuuts (kui teil see on) ja pange selga oma müts (teil peab olema üks neist).

Nüüd lubage mul tutvustada teid samm-sammult. Ausalt öeldes pole see keeruline.

1. Tutvustage nõutavat lihtsat märgistust.


  

    Oleme loomeagentuur   

2. Pange korralik taustpilt.

.avamine {
  taustpilt: URL ('https://preview.ibb.co/cBVBf7/fantasy_3146946_1280.jpg')
}

Allpool on selle tulemus:

Alustasime eimillestki. Siin me oleme!

Tulemus tundub kohmakas, kuna taustpilti korratakse.

3. Lõpetage kordus ja muutke taustpilt ilusamaks.

.avamine {
  kõrgus: 100vh;
  taust: lineaargradient (rgba (0,0,0,0,1), rgba (0,0,0,0,9)), url ('https://preview.ibb.co/hkXMDS/fantasy_3146946_1920.jpg') ei -korrata 50% 0% / kate;
}
See näib segaduses :(

Kui te ei saa ülaltoodud koodist aru, sõltub see eeldusest, et CSS-i kaudu saab elementi lisada mitu tausta. Need taustad tuleks eraldada komaga. Ülaltoodud näites tähistab lineaarne gradient ühte tausta ja url (..) teist. Üks lisab lineaarse gradiendi, teine ​​pildi.

Vaadake ülaltoodud illustratsiooni. See peaks nüüd rohkem mõistlik olema.

Kas olete endiselt segaduses? Esitage minult mingeid küsimusi kommentaaride jaotises.

Siin on tulemus! => Taustapilt on nüüd kaetud väikese gradiendiga. Päris lahe, jah?

4. Paigutage teksti sisu keskele.

Kasutage Flexboxi!

.avamine {
  ...
  kuva: flex;
  õigusta-sisu: kese;
  joonda üksused: keskel;
}
Kopeerisin selle pildi ühest mu artiklist, juhuks kui te ei tea, kuidas Flexbox töötab. Valige vajalik osa.Tekst on nüüd ideaalselt tsentreeritud. Hurraa!

5. Enne teksti animeerimist tehke tekst ilusaks.

.avatekst {
  veeris: 0;
  värv: rgba (255,255,255,0,6);
  teksti teisendamine: suurtähed;
  fondi suurus: 3,6rem;
  teksti joondamine: keskel;
}
Sul on see!Kuule! Me teeme edusamme. Hea välja nägema?

6. Valmista animeerimiseks!

Kui vaatate lõpptulemust, märkate, et lause kõik sõnad on stseenile animeeritud. Vajame viisi, kuidas sõnad üksikuteks osadeks jagada.

Käsitleme seda JavaScriptiga.

Lühidalt - siin on graafiline esitus selle kohta, mida me teha tahame.

Peame iga sõna mähima elementi <span>.

Nüüd saate aru käsilolevast ülesandest.

Ja siin on selle koodi kood. Ma loodan, et teil on JavaScriptiga rahul, sest ma viskan teile osa.

const textNode = document.querySelector ('. avanev tekst');
const splitTextArr = textNode.innerText.split ("");
lase finalMarkup = "";
splitTextArr.forEach (buildMarkup);


funktsioon buildMarkup (tekst, register) {
  lase spanText;
  (indeks === 2)?
  spanText = "" + tekst + " 
":   spanText = "" + tekst + "";      return finalMarkup + = spanText; } / ** Asenda uue märgistuse eelmine sisu span elementidega * / textNode.innerHTML = finalMarkup;

Seda pole liiga palju haarata, kuid olen edasi läinud ja illustreerinud toimuvat.

Kas on nüüd natuke rohkem mõtet?

NB! Funktsioonis buildMarkup olen edasi läinud ja lisanud kolmanda sõna järele sildi
. See tagab ühele reale jäämise asemel, et tekst puruneks.

7. Kirjutage võtmekaadrid

@keyframes peida {
    alates {läbipaistmatus: 1; }
    kuni {läbipaistmatus: 0; }
}

@keyframes helendab {
    alates {text-shadow: 0 0 14rem valge; }
    to {text-shadow: 0 0 0 valge; }
}

Lõpuefekti saavutamiseks on vaja kahte erinevat animatsiooni. Üks varjatud animatsioon ja teine ​​helendav animatsioon.

Kui te pole kursis sellega, kuidas CSS-i animatsioonid toimivad, on minu täpsema CSS-i kursuse saamine mõistusevastane. Lühidalt - animatsioone toidavad suuresti võtmekaadrid.

Võtmekarkassi plokis saate määratleda elemendi omaduste muutuse aja jooksul.

Vaadake ülaltoodud koodi. Isegi kui te ei tunne CSS-i animatsioone hästi, olen kindel, et saate sellest natuke aru saada.

8. Rakendage elementidele animatsioonid

.tekst avamine {
  läbipaistmatus: 0;
  animatsioon:
    peida 8s hõlpsalt sisse-välja lõpmatu,
    kuma 8s hõlpsalt sisse-välja lõpmatu;
}
Siin me oleme!

Hea välja nägema?

Siin on natuke selgitusi.

CSS-i teksti varju omadust kasutatakse teksti välklambi efekti loomiseks. Kui te ei tea, kuidas teksti vari töötab, siis vaadake koodrohu viidet. Kuigi olen juba aastaid kirjutanud CSS-i, otsisin seda ka värskendusena.

Me oleme selles koos!

9. Lõpuks tasakaalustage animatsioonid, et saada peen jahmatav efekt.

.tekstisisu: n-laps (6n) {
   animatsiooni viivitus: 900ms;
}
.tekstisisu: n-laps (6n-1) {
   animatsiooni viivitus: 700 ms;
}
.tekstisisu: n-laps (6n-3) {
   animatsiooni viivitus: 600 ms;
}
.tekstisisu: n-laps (6n-4) {
   animatsiooni viivitus: 300 ms;
}
.tekstisisu: n-laps (6n-5) {
   animatsiooni viivitus: 0 s;
}

Pärast iga sõna mähistamist span-elemendiga sisaldab .opening-tekst nüüd kuut elementi. Igaüks on suunatud n-ta lapse valija abil. Asenda ülaltoodud valijates n = 1. Sa saad selle kinni.

Ma sain laisaks, kuid olen kindel, et kui veedate veel mõnda aega väärtuste täpsustamiseks, on teil uhkem animatsioon.

Jah, me tegime seda

Kas olete kuskile kinni jäänud?

Andke mulle kommentaarides teada ja aitan hea meelega.

Kas olete valmis saama Pro-ks?

Olen koostanud tasuta CSS-i juhendi, et teie CSS-i oskused kohe silma paistaksid. Hankige tasuta e-raamat.

Seitse CSS-i saladust, millest te ei teadnud