Sadržaj
- 01. Pokrenite HTML dokument
- 02. Vidljivi HTML sadržaj
- 03. CSS inicijacija
- 04. Kontejner za animaciju
- 05. Inicijacija animacije
- 06. Animirajte u vidokrugu
- 07. Završetak animacije
Love Lost od kanadskog Jam3 prekrasno je mračna, za mobilne uređaje spremna interaktivna pjesma sa stvarnim srcem o trajnim osjećajima oko izgubljene ljubavi. Izgled web stranice izrađen je pomoću HTML5, a GSAP biblioteka pokreće njegovu animaciju, a jedna od njegovih vizualno najupečatljivijih značajki je animirani 3D tekst koji zaista oživljava poeziju Love Lost.
- Napravite interaktivne 3D efekte tipografije
Izgleda impresivno vraški i nije ga teško uključiti u vlastiti rad kako biste stvorili zanimljivo korisničko iskustvo; evo kako se to radi
Želite napraviti vlastitu privlačnu stranicu? Isprobajte alat za izradu web stranica i nastavite dalje bez problema odabirom prave usluge web hostinga.
01. Pokrenite HTML dokument
Prvi korak je definiranje strukture HTML dokumenta. To uključuje HTML spremnik koji pokreće dokument koji sadrži odjeljke glave i tijela. Iako se odjeljak glave primarno koristi za učitavanje vanjske CSS datoteke, odjeljak tijela pohranit će vidljivi sadržaj stranice stvoren u koraku 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * KORAK 2 OVDJE / body> / html>
02. Vidljivi HTML sadržaj
Vidljivi HTML sadržaj sastoji se od spremnika članaka koji sadrži vidljivi tekst. Važan dio spremnika članaka je atribut 'data-animate', na koji će se CSS pozivati radi primjene vizualnih efekata. Tekst u članku izrađen je od oznake h1 da bi se naznačilo da je sadržaj glavni naslov stranice.
article data-animate = "move in"> h1> Pozdrav! / h1> / article>
03. CSS inicijacija
Stvorite novu datoteku pod nazivom 'styles.css'. Prvi set uputa postavio je HTML spremnik i tijelo stranice na crnu pozadinu, kao i bez vidljivog razmaka od obruba. Bijela je također postavljena kao zadana boja teksta za nasljeđivanje svih podređenih elemenata na stranici; izbjegavajući zadanu crnu boju teksta čineći da se čini da je sadržaj nevidljiv.
html, tijelo {background: # 000; popunjavanje: 0; marža: 0; boja: #fff; }
04. Kontejner za animaciju
Spremnik sadržaja na koji se upućuje atribut 'data-animate' ima primijenjene specifične stilove. Njegova je veličina postavljena tako da odgovara punoj veličini zaslona pomoću vw i vh mjernih jedinica, kao i da je blago rotirana. Primjenjuje se animacija nazvana 'moveIn' koja će trajati 20 sekundi i ponavljat će se beskonačno.
[data-animate = "use in"] {pozicija: relativna; širina: 100vw; visina: 100vh; neprozirnost: 1; animacija: moveIn 20s beskonačno; poravnanje teksta: središte; transformirati: rotirati (20deg); }
05. Inicijacija animacije
Animacija 'moveIn' na koju se poziva prethodni korak zahtijeva definiciju pomoću @keyframes. Prvi kadar koji započinje s 0% animacije postavlja zadanu veličinu fonta, pozicioniranje teksta i vidljivu sjenu. Uz to, stavka se postavlja s nultom neprozirnošću tako da je u početku nevidljiva - tj. prikazan izvan pogleda.
@keyframes moveIn {0% {font-size: 1em; lijevo: 0; neprozirnost: 0; sjena teksta: nema; } * * * 6. KORAK OVDJE}
06. Animirajte u vidokrugu
Sljedeći kadar postavlja se na 10% kroz animaciju. Ovaj okvir postavlja neprozirnost na potpuno vidljivu, što rezultira postupnim animiranjem teksta.Uz to, dodaju se više sjena s plavim i opadajućim vrijednostima boje kako bi se tekstu dale iluzije 3D dubine.
10% {neprozirnost: 1; sjena teksta: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * 7. KORAK OVDJE
07. Završetak animacije
Završni kadrovi javljaju se na 80% i na samom kraju animacije. Oni su odgovorni za povećanje veličine slova i pomicanje elementa ulijevo. Primjenjuju se i nove postavke za animiranje sjene teksta, dok se tekst također uklanja iz okvira od 80% do 100%.
80% {font-size: 8em; lijevo: -8em; neprozirnost: 1; } 100% {font-size: 10em; lijevo: -10em; neprozirnost: 0; sjena teksta: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Napomena: bez obzira na projekt u koji krećete, nužno je imati pohranu u oblaku koja se može nositi (naš vodič će vam pomoći).
Ovaj je članak izvorno objavljen u broju 273 kreativnog časopisa za web dizajn Web Designer. Kupite izdanje 273 ovdje ili ovdje se pretplatite na Web Designer.
