Kuinka luoda hienovaraisia ​​animoituja tekstiaukkoja

Oletko koskaan nähnyt hienovaraisia ​​tekstiaukkoja ja miettinyt, kuinka ne syntyivät?

Niitä on siellä niin paljon, ja on käytännössä mahdotonta selittää, kuinka he kaikki toimivat.

Otetaan kuitenkin esimerkki ja annetaan minun näyttää sinulle, kuinka luoda se uudelleen.

Tein valinnan jo, ja rakennamme seuraavaa:

Se on teksti-aukko fiktiiviselle luovalle toimistolle. Voit tarkastella tuloksia täällä.

Näet salaman, eikö niin? Näet myös kuinka animaatio porrastetaan - koko tekstin animoinnin sijasta jokainen tekstin sana on ajoitettu eri tavalla?

Näytän sinulle kuinka luoda nämä uudelleen.

Laita hymy. Tulet rakastamaan sitä!

esittely

Kukaan ei pidä rumaista merkinnöistä. Itse asiassa emme kirjoita paljon merkintöjä. Uudelleen luodaan tämä animaatio.

Ensinnäkin, tartu huppariisi (jos sinulla on) ja laita dev-hattuasi (sinulla on oltava sellainen).

Sallikaa minun nyt käydä sinut läpi vaihe vaiheelta. Ei ole vaikeaa olla rehellinen.

1. Esitä vaadittava yksinkertainen merkintä.

  

    Olemme luova toimisto
  

2. Aseta kunnollinen taustakuva.

.avaa {
  taustakuva: url ('https://preview.ibb.co/cBVBf7/fantasy_3146946_1280.jpg')
}

Alla on seuraus siitä:

Tulos näyttää hankalalta, koska taustakuva toistuu.

3. Pysäytä toisto ja muuta taustakuva kauniimmaksi.

.avaa {
  korkeus: 100vh;
  tausta: lineaarinen gradientti (rgba (0,0,0,0,1), rgba (0,0,0,0,9)), url ('https://preview.ibb.co/hkXMDS/fantasy_3146946_1920.jpg') ei - toista 50% 0% / kansi;
}

Jos et ymmärrä yllä olevaa koodia, se riippuu oletuksesta, että CSS: n kautta elementtiin voidaan lisätä useita taustoja. Nämä taustat tulisi erottaa pilkulla. Yllä olevassa esimerkissä lineaarinen gradientti edustaa yhtä taustaa ja URL (..) toista. Yksi lisää lineaarisen gradientin, toinen kuvan.

Katsokaa yllä olevaa kuvaa. Sen pitäisi olla enemmän järkeä nyt.

Vieläkin hämmentynyt? Kysy minulta kommenttiosion kysymyksiä jatkaessamme.

4. Sijoita tekstisisältö keskelle.

Käytä Flexboxia!

.avaa {
  ...
  näyttö: flex;
  perustele sisältö: keskusta;
  Kohdista tuotteet: keskusta;
}

5. Tee tekstistä aika ennen kuin animoimme.

.avaa teksti {
  marginaali: 0;
  väri: rgba (255,255,255,0,6);
  tekstimuunnos: iso kirjain;
  fonttikoko: 3,6rem;
  tekstin kohdistaminen: keskusta;
}

6. Valmistaudu animoimaan!

Jos tarkastelemme lopputulosta, huomaat, että lauseen jokainen sana animoidaan kohtaukseen. Tarvitsemme tavan erottaa sanat yksittäisiin elementteihin.

Käsittelemme tätä JavaScriptin avulla.

Lyhyesti sanottuna tässä on graafinen esitys siitä, mitä haluamme tehdä.

Nyt ymmärrät käsillä olevan tehtävän.

Ja tässä on koodi tälle. Toivottavasti sinulla on JavaScriptiä, koska aion heittää sinut.

const textNode = document.querySelector ('. avausteksti');
const splitTextArr = textNode.innerText.split ("");

anna finalMarkup = "";
splitTextArr.forEach (buildMarkup);


funktio buildMarkup (teksti, hakemisto) {
  anna spanText;

  (hakemisto === 2)?
  spanText = "" + teksti + " 
":
  spanText = "" + teksti + "";
  
  return finalMarkup + = spanText;
}

/ ** Korvaa uuden merkinnän aikaisempi sisältö vertailuelementeillä * /
textNode.innerHTML = finalMarkup;

Sitä ei tarvitse ymmärtää liikaa, mutta olen mennyt eteenpäin ja kuvinnut mitä tapahtuu.

Huom. Olen mennyt eteenpäin buildMarkup-toiminnossa ja lisännyt
-tunnisteen kolmannen sanan jälkeen. Tämä varmistaa, että teksti hajoaa sen sijaan, että pysyisi yhdellä rivillä.

7. Kirjoita avainruudut

@keyframes piilota {
    alkaen {opasiteetti: 1; }
    - {opasiteetti: 0; }
}

@ avainkehykset hehkuvat {
    alkaen {text-shadow: 0 0 14rem valkoinen; }
    to {text-shadow: 0 0 0 white; }
}

Lopputehosteeksi tarvitaan kaksi erilaista animaatiota. Yksi, piilota animaatio ja toinen, hehkuva animaatio.

Jos et ole tietoinen siitä, kuinka CSS-animaatiot toimivat, Advanced CSS -kurssin hankkiminen on vaivatonta. Lyhyesti sanottuna animaatiot saavat pääosin avainruutuja.

Määrität avainruudun lohkossa elementin ominaisuuksien muutoksen ajan myötä.

Katso yllä oleva koodi. Vaikka et tiedä CSS-animaatioita hyvin, olen varma, että voit tehdä siitä järkeä.

8. Levitä animaatiot elementteihin

.avaavan tekstin span {
  opasiteetti: 0;
  animaatio:
    piilota 8s helposti-sisään-ulos ääretön,
    hehku 8s helposti sisään-ulos ääretön;
}

Hyvältä näyttää?

Tässä on vähän selitystä.

CSS text-shadow -ominaisuutta käytetään luomaan salaman tehoste tekstiin. Jos et tiedä kuinka varjotekstit ovat, tutustu codrops-viitteeseen. Vaikka olen kirjoittanut CSS: ää vuosia, etsin sitä myös virkistäväksi.

Olemme tässä yhdessä!

9. Lopuksi korvata animaatiot hienovaraisella huikeaa vaikutusta varten.

.avaavan tekstin span: n. lapsi (6n) {
   animaation viive: 900ms;
}
.avaavan tekstin span: n. lapsi (6n-1) {
   animaation viive: 700 ms;
}
.avaavan tekstin span: n. lapsi (6n-3) {
   animaation viive: 600 ms;
}
.avaavan tekstin span: n. lapsi (6n-4) {
   animaation viive: 300 ms;
}
.avaavan tekstin span: n. lapsi (6n-5) {
   animaation viive: 0 s;
}

Käärittyään jokaisen sanan span-elementtiin, avautuva teksti sisältää nyt kuusi elementtiä. Jokainen kohdistetaan n. Lapsen valitsimella. Korvaa n = 1 yllä olevissa valitsimissa. Saat sen ripustettavaksi.

Minusta tuli laiska, mutta olen varma, että jos vietät lisää aikaa arvojen säätämiseen, sinulla on kauniimpi animaatio.

Joo, teimme sen

Kiinnittynytkö jonnekin?

Kerro siitä kommentteissa ja autan mielelläni.

Oletko valmis tulemaan Pro: ksi?

Olen luonut ilmaisen CSS-oppaan saadaksesi CSS-taitosi hellittämään heti. Hanki ilmainen e-kirja.