Sisu
- 01. Algatage HTML-dokument
- 02. Nähtav HTML-sisu
- 03. CSS-i algatamine
- 04. Animatsioonikonteiner
- 05. Animatsiooni algatamine
- 06. Animeeri vaatevälja
- 07. Animatsiooni lõpuleviimine
Kanada Jam3 armastus on kadunud - see on kaunilt tume, mobiilseadmetele mõeldud ja tõelise südamega interaktiivne luuletus kadunud armastuse kestvatest tunnetest. Veebisaidi kujundus on loodud HTML5 abil, GSAP-i teegi abil saab selle animatsiooni kasutada. Selle üks visuaalselt silmatorkavamaid funktsioone on animeeritud 3D-tekst, mis äratab Love Lost'i luule tõepoolest.
- Tehke interaktiivseid 3D-tüpograafilisi efekte
See näeb pagana muljetavaldav ja kaasahaarava kasutajakogemuse loomiseks pole seda raske oma töösse lisada; siin on, kuidas seda tehakse.
Kas soovite luua oma köitva saidi? Proovige veebisaidi looja tööriista ja hoidke asjad sujuvalt, valides õige veebimajutusteenuse.
01. Algatage HTML-dokument
Esimene samm on HTML-dokumendi struktuuri määratlemine. See hõlmab HTML-i konteinerit, mis algatab dokumendi, mis sisaldab pea ja keha jaotisi. Kui peaosa kasutatakse peamiselt välise CSS-faili laadimiseks, siis kehaosa salvestab 2. etapis loodud nähtava lehe sisu.
! DOCTYPE html> html> head> pealkiri> 3D tekstiliikumine / pealkiri> link rel = "stiilitabel" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 SIIN / body> / html>
02. Nähtav HTML-sisu
Nähtav HTML-sisu koosneb artiklikonteinerist, mis sisaldab nähtavat teksti. Artiklimahuti oluline osa on atribuut ’data-animate’, millele CSS viitab visuaalefektide rakendamiseks. Artikli sees olev tekst on tehtud h1-märgendist, mis näitab, et sisu on lehe peamine pealkiri.
article data-animate = "move in"> h1> Tere seal! / h1> / article>
03. CSS-i algatamine
Looge uus fail nimega ’styles.css’. Esimeste juhiste komplektiga määrati lehe HTML-i konteiner ja keha mustaks taustaks ning nähtava ääriste vahe puudub. Valge on seatud ka vaikimisi tekstivärviks lehel kõigi pärandite jaoks; teksti vaikimisi musta värvi vältimine muudab sisu nähtamatuks.
HTML, body {background: # 000; polster: 0; varu: 0; värv: #fff; }
04. Animatsioonikonteiner
Atribuudiga ’data-animate’ viidatud sisukonteineris on rakendatud kindlaid stiile. Selle suurus on seatud nii, et see vastaks ekraani täissuurusele, kasutades vw ja vh mõõtühikuid, samuti kergelt pöörates. Rakendatakse animatsioon nimega ’moveIn’, mis kestab 20 sekundit ja kordub lõpmatult.
[data-animate = "liikuma sisse"] {asend: suhteline; laius: 100vw; kõrgus: 100vh; läbipaistmatus: 1; animatsioon: moveIn 20s lõpmatu; teksti joondamine: keskel; teisendada: pöörata (20deg); }
05. Animatsiooni algatamine
Eelmises etapis viidatud animatsioon ’moveIn’ nõuab definitsiooni, kasutades @keyframes. Esimene kaader, mis algab animatsioonist 0%, määrab fondi vaikesuuruse, teksti positsioneerimise ja nähtava varju. Lisaks määratakse üksus läbipaistmatuseta nii, et see oleks algselt nähtamatu - st. kuvatakse vaateväliselt.
@keyframes moveIn {0% {font-size: 1em; vasakul: 0; läbipaistmatus: 0; teksti vari: puudub; } * * * 6. SAMM SIIN}
06. Animeeri vaatevälja
Järgmine kaader paigutatakse animatsiooni kaudu 10% -le. Selle raami abil on läbipaistmatus täielikult nähtav, mille tulemusel animeeritakse tekst järk-järgult.Lisaks sellele lisatakse tekstile 3D-sügavuse illusioonide saamiseks mitu varju sinise ja kahaneva värviväärtusega.
10% {läbipaistmatus: 1; teksti vari: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * 7. SAMM SIIN
07. Animatsiooni lõpuleviimine
Lõplikud kaadrid esinevad 80% juures ja animatsiooni kõige lõpus. Need vastutavad fondi suuruse suurendamise ja elemendi vasakule poole liikumise eest. Uusi sätteid rakendatakse ka tekstivarjule, mille suunas animeerida, samal ajal kaob see teksti vaateväljal kaadritelt 80% kuni 100%.
80% {font-size: 8em; vasakul: -8em; läbipaistmatus: 1; } 100% {font-size: 10em; vasakul: -10em; läbipaistmatus: 0; teksti vari: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Märkus: olenemata projektist, millega te tegelete, on hädavajalik pilvemälu olemasolu (meie juhend aitab).
See artikkel ilmus algselt loomingulise veebidisaini ajakirja Web Designer väljaandes 273. Osta väljaanne 273 siit või tellige veebidisainer siin.
