Conţinut
- 01. Lansați documentul HTML
- 02. Conținut HTML vizibil
- 03. inițiere CSS
- 04. Container de animație
- 05. Inițierea animației
- 06. Animează în vedere
- 07. Finalizarea animației
Love Lost by Canada’s Jam3 este un poem interactiv frumos întunecat, pregătit pentru mobil, cu o inimă reală despre sentimentele durabile din jurul dragostei pierdute. Aspectul site-ului a fost construit folosind HTML5 cu biblioteca GSAP care alimentează animația, una dintre caracteristicile sale cele mai izbitoare din punct de vedere vizual este textul său 3D animat care dă viață cu adevărat poeziei lui Love Lost.
- Faceți efecte interactive de tipografie 3D
Arată impresionant și nu este greu să îl încorporezi în propria ta muncă pentru a crea o experiență de utilizator captivantă; iată cum se face.
Doriți să vă creați propriul site interesant? Încercați un instrument de creare a site-urilor web și păstrați lucrurile fără probleme alegând serviciul de găzduire web potrivit.
01. Lansați documentul HTML
Primul pas este de a defini structura documentului HTML. Aceasta include containerul HTML care inițiază documentul, care conține secțiunile cap și corp. În timp ce secțiunea cap este utilizată în principal pentru a încărca fișierul CSS extern, secțiunea corp va stoca conținutul vizibil al paginii creat la pasul 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 AICI / corp> / html>
02. Conținut HTML vizibil
Conținutul HTML vizibil constă dintr-un container de articole care conține textul vizibil. Partea importantă a containerului articolului este atributul „data-animate”, la care CSS va face referință pentru a aplica efectele vizuale. Textul din articol este făcut dintr-o etichetă h1 pentru a indica faptul că conținutul este titlul principal al paginii.
article data-animate = "move in"> h1> Bună ziua! / h1> / article>
03. inițiere CSS
Creați un fișier nou numit „styles.css”. Primul set de instrucțiuni setează containerul și corpul HTML ale paginii să aibă un fundal negru, precum și nici o distanță vizibilă între margini. Albul este, de asemenea, setat ca culoare implicită a textului pentru toate elementele copil de pe pagină de moștenit; evitând culoarea neagră implicită a textului, ceea ce face ca conținutul să pară invizibil.
html, corp {fundal: # 000; umplutură: 0; marja: 0; culoare: #fff; }
04. Container de animație
Containerul de conținut la care se face referire cu atributul „date-animate” are aplicate stiluri specifice. Dimensiunea sa este setată să se potrivească cu dimensiunea completă a ecranului utilizând unitățile de măsurare vw și vh, precum și să fie ușor rotită. Se aplică o animație numită „moveIn”, care va dura 20 de secunde și se va repeta la infinit.
[data-animate = "mutați în"] {poziție: relativă; lățime: 100vw; înălțime: 100vh; opacitate: 1; animație: moveIn 20s infinit; text-align: centru; transforma: roti (20deg); }
05. Inițierea animației
Animația „moveIn” la care se face referire în pasul anterior necesită o definiție utilizând @keyframes. Primul cadru începând de la 0% din animație setează dimensiunea implicită a fontului, poziționarea textului și umbra vizibilă. În plus, elementul este setat cu opacitate zero, astfel încât să fie inițial invizibil - adică. afișat în afara vederii.
@keyframes moveIn {0% {font-size: 1em; stânga: 0; opacitate: 0; text-shadow: none; } * * * PASUL 6 AICI}
06. Animează în vedere
Următorul cadru este plasat la 10% prin animație. Acest cadru setează opacitatea pe deplin vizibilă, rezultând ca textul să fie treptat animat în vizualizare.În plus, sunt adăugate mai multe umbre cu valori de culoare albastră și descrescătoare pentru a da iluzii adâncimii 3D textului.
10% {opacitate: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * PASUL 7 AICI
07. Finalizarea animației
Cadrele finale au loc la 80% și chiar la sfârșitul animației. Acestea sunt responsabile pentru mărirea dimensiunii fontului și deplasarea elementului spre stânga. Setări noi sunt, de asemenea, aplicate pentru ca umbra textului să fie animată, în timp ce decolorează textul din vizualizare de la cadre de 80% la 100%.
80% {font-size: 8em; stânga: -8em; opacitate: 1; } 100% {font-size: 10em; stânga: -10em; opacitate: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Notă: indiferent de proiectul în care vă lansați, este esențial să aveți spațiu de stocare în cloud care poate face față (ghidul nostru vă va ajuta).
Acest articol a fost publicat inițial în numărul 273 al revistei web design creative Web Designer. Cumpărați numărul 273 aici sau abonați-vă la Web Designer aici.
