Nilalaman
- 01. Simulan ang dokumento ng HTML
- 02. Nakikitang nilalaman ng HTML
- 03. pagsisimula ng CSS
- 04. lalagyan ng Animation
- 05. Pagsisimula ng animasyon
- 06. I-animate sa view
- 07. Pagtatapos sa animasyon
Ang Love Lost ng Jam3 ng Canada ay isang magandang madilim, mobile-handa na interactive na tula na may tunay na puso tungkol sa walang-hanggang damdamin sa paligid ng nawalang pag-ibig. Ang layout ng website ay itinayo gamit ang HTML5 na may GSAP library na nagpapatakbo ng animasyon nito, ang isa sa mga pinaka-kapansin-pansin na tampok nito ay ang animated na 3D na teksto na talagang binibigyang buhay ang tula ng Love Lost.
- Gumawa ng mga interactive na 3D typography effect
Mukha itong kahanga-hanga tulad ng impiyerno, at hindi mahirap isama sa iyong sariling gawain upang lumikha ng isang nakakaengganyong karanasan ng gumagamit; narito kung paano ito tapos.
Nais mong gumawa ng iyong sariling nakakaengganyo na site? Subukan ang isang tool ng tagabuo ng website, at panatilihing maayos ang pagpapatakbo ng mga bagay sa pamamagitan ng pagpili ng tamang serbisyo sa web hosting.
01. Simulan ang dokumento ng HTML
Ang unang hakbang ay upang tukuyin ang istraktura ng dokumento ng HTML. Kasama rito ang lalagyan ng HTML na nagpasimula ng dokumento, na naglalaman ng mga seksyon ng ulo at katawan. Habang ang seksyon ng ulo ay pangunahing ginagamit upang mai-load ang panlabas na CSS file, ang seksyon ng katawan ay mag-iimbak ng nakikitang nilalaman ng pahina na nilikha sa hakbang 2.
! DOCTYPE html> html> ulo> pamagat> Kilusan ng Tekstong 3D / pamagat> link rel = "styleheet" type = "text / css" href = "style.css" /> / ulo> katawan> * * * HAKBANG 2 DITO / katawan> / html>
02. Nakikitang nilalaman ng HTML
Ang nakikitang nilalaman ng HTML ay binubuo ng isang lalagyan ng artikulo na naglalaman ng nakikitang teksto. Ang mahalagang bahagi ng lalagyan ng artikulo ay ang katangiang 'data-animate', na isangguni ng CSS upang mailapat ang mga visual effects. Ang teksto sa loob ng artikulo ay ginawa mula sa isang h1 na tag upang ipahiwatig na ang nilalaman ay pangunahing pamagat ng pahina.
artikulo ng data-animate = "ilipat sa"> h1> Kamusta Na! / h1> / artikulo>
03. pagsisimula ng CSS
Lumikha ng isang bagong file na tinatawag na 'style.css'. Itinakda ng unang hanay ng mga tagubilin ang lalagyan ng HTML ng pahina at katawan na magkaroon ng isang itim na background, pati na rin walang nakikitang spacing ng hangganan. Nakatakda din ang puti bilang default na kulay ng teksto para sa lahat ng mga elemento ng bata sa pahina na magmamana; pag-iwas sa default na itim na kulay ng paggawa ng nilalaman ng teksto na lilitaw na hindi nakikita.
html, katawan {background: # 000; padding: 0; margin: 0; kulay: #fff; }
04. lalagyan ng Animation
Ang lalagyan ng nilalaman na sumangguni sa katangiang 'data-animate' ay may partikular na inilapat na mga estilo. Ang laki nito ay nakatakda upang tumugma sa buong sukat ng screen gamit ang mga unit ng pagsukat ng vw at vh, pati na rin ang pag-ikot ng bahagya. Ang isang animation na tinatawag na 'moveIn' ay inilalapat, na tatagal sa loob ng 20 segundo at mauulit nang walang hanggan.
[data-animate = "ilipat sa"] {posisyon: kamag-anak; lapad: 100vw; taas: 100vh; opacity: 1; animation: ilipat Sa 20s walang katapusan; text-align: gitna; ibahin ang anyo: paikutin (20deg); }
05. Pagsisimula ng animasyon
Ang animsyong 'moveIn' na sumangguni sa nakaraang hakbang ay nangangailangan ng isang kahulugan gamit ang @keyframes. Ang unang frame na nagsisimula sa 0% ng animation ay nagtatakda ng default na laki ng font, pagpoposisyon ng teksto at nakikitang anino. Bilang karagdagan, ang item ay itinakda na may zero opacity upang sa una ay hindi ito nakikita - ibig sabihin. ipinakita nang wala sa pagtingin.
@keyframes ilipat Sa {0% {font-size: 1em; kaliwa: 0; opacity: 0; text-shadow: wala; } * * * HAKBANG 6 DITO}
06. I-animate sa view
Ang susunod na frame ay nakalagay sa 10% sa pamamagitan ng animasyon. Itinakda ng frame na ito ang opacity sa ganap na nakikita, na nagreresulta sa teksto na unti-unting na-animate sa view.Bilang karagdagan, maraming mga anino ay idinagdag na may asul at pagbawas ng mga halaga ng kulay upang ibigay ang mga ilusyon ng lalim ng 3D sa teksto.
10% {opacity: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * HAKBANG 7 DITO
07. Pagtatapos sa animasyon
Ang huling mga frame ay nangyayari sa 80% at sa pinakadulo ng animasyon. Responsable ito para sa pagtaas ng laki ng font at paglipat ng elemento patungo sa kaliwa. Inilalapat din ang mga bagong setting para sa anino ng teksto upang mai-animate patungo, habang kumukupas din ang teksto mula sa pagtingin mula sa mga frame na 80% hanggang 100%.
80% {laki ng font: 8em; kaliwa: -8em; opacity: 1; } 100% {laki ng font: 10em; kaliwa: -10em; opacity: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Tandaan: anuman ang proyekto na sinisimulan mo, ang pagkakaroon ng cloud storage na makakaya ay mahalaga (makakatulong ang aming gabay).
Ang artikulong ito ay orihinal na na-publish sa isyu 273 ng malikhaing web disenyo magazine sa Web Designer. Bumili ng isyu 273 dito o mag-subscribe sa Web Designer dito.
