Indhold
- 01. Start HTML-dokumentet
- 02. Synligt HTML-indhold
- 03. CSS indledning
- 04. Animationsbeholder
- 05. Animationsinitiering
- 06. Animer til syne
- 07. Afslutning af animationen
Love Lost af Canadas Jam3 er et smukt mørkt, mobil-klar interaktivt digt med ægte hjerte om de vedvarende følelser omkring mistet kærlighed. Webstedslayoutet blev bygget ved hjælp af HTML5 med GSAP-biblioteket, der driver sin animation, en af dens mest visuelt slående funktioner er dens animerede 3D-tekst, der virkelig bringer Love Lost's poesi til live.
- Lav interaktive 3D typografi effekter
Det ser imponerende ud som helvede, og det er ikke svært at indarbejde i dit eget arbejde for at skabe en engagerende brugeroplevelse; her er hvordan det gøres.
Vil du oprette dit eget engagerende sted? Prøv et værktøj til webstedsbyggeri, og hold tingene kørende uden problemer ved at vælge den rigtige webhostingtjeneste.
01. Start HTML-dokumentet
Det første trin er at definere strukturen i HTML-dokumentet. Dette inkluderer HTML-beholderen, der starter dokumentet, som indeholder hoved- og kropssektionerne. Mens hovedsektionen primært bruges til at indlæse den eksterne CSS-fil, gemmer body-sektionen det synlige sideindhold, der blev oprettet i trin 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * TRIN 2 HER / body> / html>
02. Synligt HTML-indhold
Det synlige HTML-indhold består af en artikelbeholder, der indeholder den synlige tekst. Den vigtige del af artikelcontaineren er attributten 'data-animer', som CSS henviser til for at anvende de visuelle effekter. Teksten inde i artiklen er lavet af et h1-tag for at indikere, at indholdet er sidens hovedtitel.
artikel data-animate = "flyt ind"> h1> Hej der! / h1> / artikel>
03. CSS indledning
Opret en ny fil kaldet 'styles.css'. Det første sæt instruktioner indstiller sidens HTML-beholder og brødtekst til at have en sort baggrund såvel som ingen synlig kantafstand. Hvid er også indstillet som standardtekstfarve for alle underordnede elementer på siden, der skal arves; undgå standard sort farve på tekst, hvilket gør indhold til at være usynligt.
html, body {baggrund: # 000; polstring: 0; margen: 0; farve: #fff; }
04. Animationsbeholder
Indholdsbeholderen, der henvises til med attributten 'data-animer', har anvendt specifikke stilarter. Dens størrelse er indstillet til at matche skærmens fulde størrelse ved hjælp af vw- og vh-måleenheder, såvel som at den let drejes. En animation kaldet 'moveIn' anvendes, som varer i en varighed på 20 sekunder og gentages uendeligt.
[data-animate = "flyt ind"] {position: relativ; bredde: 100vw; højde: 100vh; uigennemsigtighed: 1; animation: moveIn 20s uendelig; tekstjustering: center; transformere: rotere (20deg); }
05. Animationsinitiering
Animationen 'moveIn', der henvises til i det forrige trin, kræver en definition ved hjælp af @keyframes. Den første ramme, der starter ved 0% af animationen, indstiller standard skriftstørrelse, tekstplacering og synlig skygge. Derudover er elementet indstillet med nul opacitet, så det oprindeligt er usynligt - dvs. vises uden syn.
@keyframes moveIn {0% {font-size: 1em; venstre: 0; uigennemsigtighed: 0; tekst-skygge: ingen; } * * * TRIN 6 HER}
06. Animer til syne
Den næste ramme placeres på 10% gennem animationen. Denne ramme indstiller opacitet til fuldt synlig, hvilket resulterer i, at teksten gradvist bliver animeret til visning.Derudover tilføjes flere skygger med blå og faldende farveværdier for at give illusionerne af 3D-dybde til teksten.
10% {opacitet: 1; tekst-skygge: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * TRIN 7 HER
07. Afslutning af animationen
De sidste rammer forekommer ved 80% og i slutningen af animationen. Disse er ansvarlige for at øge skriftstørrelsen og flytte elementet mod venstre. Nye indstillinger anvendes også til tekstskygge at animere mod, mens de også falmer teksten ude af visningen fra rammer 80% til 100%.
80% {skriftstørrelse: 8 em; venstre: -8em; uigennemsigtighed: 1; } 100% {font-size: 10em; venstre: -10em; uigennemsigtighed: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Bemærk: Uanset hvilket projekt du påbegynder, er det vigtigt at have cloudlager, der kan klare (vores guide hjælper).
Denne artikel blev oprindeligt offentliggjort i nummer 273 af det kreative webdesignmagasin Web Designer. Køb nummer 273 her eller abonner på Web Designer her.
