Sisältö
- 01. Aloita HTML-asiakirja
- 02. Näkyvä HTML-sisältö
- 03. CSS: n aloittaminen
- 04. Animaatio kontti
- 05. Animaation aloittaminen
- 06. Animoi näkymä
- 07. Animaation viimeistely
Kanadan Jam3: n rakkauden kadonnut on kauniisti tumma, matkapuhelimille valmis interaktiivinen runo, jolla on todellinen sydän kadonneen rakkauden kestävistä tunteista. Sivuston ulkoasu rakennettiin HTML5: n avulla GSAP-kirjastosta animaatiota tehtäessä. Yksi sen visuaalisesti silmiinpistävimmistä ominaisuuksista on sen animoitu 3D-teksti, joka todella tuo Love Lostin runouden eloon.
- Tee interaktiivisia 3D-typografiaefektejä
Se näyttää vaikuttavalta helvetiltä, eikä sitä ole vaikea sisällyttää omaan työhösi houkuttelevan käyttökokemuksen luomiseksi. näin se tehdään.
Haluatko tehdä oman kiinnostavan sivuston? Kokeile verkkosivustojen rakennustyökalua ja pidä asiat sujuvasti valitsemalla oikea web-hosting-palvelu.
01. Aloita HTML-asiakirja
Ensimmäinen vaihe on määritellä HTML-asiakirjan rakenne. Tämä sisältää HTML-säilön, joka käynnistää asiakirjan, joka sisältää pää- ja runko-osiot. Vaikka pääosaa käytetään ensisijaisesti ulkoisen CSS-tiedoston lataamiseen, runko-osa tallentaa vaiheessa 2 luodun näkyvän sivusisällön.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * VAIHE 2 TÄSTÄ / body> / html>
02. Näkyvä HTML-sisältö
Näkyvä HTML-sisältö koostuu artikkelisäiliöstä, joka sisältää näkyvän tekstin. Tärkeä osa artikkelisäiliötä on data-animate-attribuutti, johon CSS viittaa visuaalisten tehosteiden soveltamiseksi. Artikkelin sisällä oleva teksti on tehty h1-tagista, mikä osoittaa, että sisältö on sivun pääotsikko.
Article data-animate = "move in"> h1> Hei siellä! / h1> / article>
03. CSS: n aloittaminen
Luo uusi tiedosto nimeltä ”styles.css”. Ensimmäiset ohjeet asettavat sivun HTML-säilön ja tekstiosan mustaksi taustaksi eikä näkyviin reunaväleihin. Valkoinen on asetettu myös oletustekstiväriksi kaikille perittäville sivuelementeille. välttäen tekstin oletuksena olevan mustan värin tekeminen näyttää sisällön näkymättömältä.
html, body {tausta: # 000; pehmuste: 0; marginaali: 0; väri: #fff; }
04. Animaatio kontti
Sisältösäiliössä, johon viitataan data-animate-määritteellä, on käytetty erityisiä tyylejä. Sen koko on asetettu vastaamaan ruudun täysikokoa vw- ja vh-mittayksiköiden avulla sekä pyörittämällä sitä hieman. Käytetään animaatio nimeltä ”moveIn”, joka kestää 20 sekuntia ja toistuu loputtomasti.
[data-animate = "siirry sisään"] {sijainti: suhteellinen; leveys: 100vw; korkeus: 100vh; opasiteetti: 1; animaatio: moveIn 20s infinite; tekstin tasaus: keskellä; muunnos: kiertää (20 astetta); }
05. Animaation aloittaminen
Edellisessä vaiheessa viitattu ”moveIn” -animaatio vaatii määritelmän @keyframes-sovelluksella. Ensimmäinen kehys, joka alkaa 0% animaatiosta, asettaa oletusfontin koon, tekstin sijainnin ja näkyvän varjon. Lisäksi alkio asetetaan nollaan opasiteettia niin, että se on alun perin näkymätön - ts. näkyy näkyvissä.
@ avainkehykset liikkuvat {0% {font-size: 1em; vasen: 0; opasiteetti: 0; text-shadow: ei mitään; } * * * VAIHE 6 TÄSTÄ}
06. Animoi näkymä
Seuraava kehys asetetaan 10%: iin animaation kautta. Tämä kehys asettaa peittävyyden täysin näkyväksi, jolloin teksti animoidaan asteittain näkymään.Lisäksi useita varjoja lisätään sinisillä ja laskevilla väriarvoilla, jotta tekstille saadaan 3D-syvyyden illuusioita.
10% {opasiteetti: 1; teksti-varjo: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * VAIHE 7 TÄSTÄ
07. Animaation viimeistely
Lopulliset kehykset esiintyvät 80%: lla ja animaation lopussa. Nämä ovat vastuussa kirjasimen koon lisäämisestä ja elementin siirtämisestä vasemmalle. Uusia asetuksia käytetään myös tekstivarjon animoimiseksi kohti, samalla kun teksti häipyy näkymästä kehyksistä 80% - 100%.
80% {font-size: 8em; vasen: -8em; opasiteetti: 1; } 100% {font-size: 10em; vasen: -10em; opasiteetti: 0; teksti-varjo: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Huomaa: riippumatta siitä, mihin projektiin aloitat, pilvivarasto, joka selviää, on välttämätöntä (oppaamme auttaa).
Tämä artikkeli julkaistiin alun perin luovan web-suunnittelun aikakauslehden Web Designer numerossa 273. Osta numero 273 täältä tai tilaa Web Designer täältä.
