Innhold
- 01. Start HTML-dokumentet
- 02. Synlig HTML-innhold
- 03. CSS innvielse
- 04. Animasjonsbeholder
- 05. Animasjonsinnvielse
- 06. Animer til synet
- 07. Avslutt animasjonen
Love Lost av Canadas Jam3 er et vakkert mørkt, mobilklart interaktivt dikt med ekte hjerte om de varige følelsene rundt mistet kjærlighet. Nettstedsoppsettet ble bygget ved hjelp av HTML5 med GSAP-biblioteket som driver animasjonen, en av de mest visuelt slående funksjonene er den animerte 3D-teksten som virkelig bringer Love Lost's poesi til liv.
- Lag interaktive 3D typografi effekter
Det ser imponerende ut som helvete, og det er ikke vanskelig å innlemme det i ditt eget arbeid for å skape en engasjerende brukeropplevelse; her er hvordan det gjøres.
Vil du lage ditt eget engasjerende nettsted? Prøv et verktøy for nettstedbyggere, og hold ting i orden ved å velge riktig webhotelltjeneste.
01. Start HTML-dokumentet
Det første trinnet er å definere strukturen til HTML-dokumentet. Dette inkluderer HTML-beholderen som starter dokumentet, som inneholder hodet og kroppsseksjonene. Mens head-delen primært brukes til å laste den eksterne CSS-filen, vil body-delen lagre det synlige sideinnholdet som ble opprettet i trinn 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * TRINN 2 HER / body> / html>
02. Synlig HTML-innhold
Det synlige HTML-innholdet består av en artikkelbeholder som inneholder den synlige teksten. Den viktige delen av artikkelbeholderen er attributtet 'data-animate', som CSS refererer til for å bruke de visuelle effektene. Teksten inne i artikkelen er laget av en h1-tag for å indikere at innholdet er sidens hovedtittel.
artikkel data-animate = "flytt inn"> h1> Hei der! / h1> / artikkel>
03. CSS innvielse
Opprett en ny fil som heter 'styles.css'. Det første settet med instruksjoner angir at sidens HTML-beholder og brødtekst skal ha svart bakgrunn, så vel som ingen synlig kantavstand. Hvit er også angitt som standard tekstfarge for alle underordnede elementer på siden som skal arves; unngå standard svartfarge på tekst som gjør at innhold ser ut til å være usynlig.
html, kropp {bakgrunn: # 000; polstring: 0; margin: 0; farge: #fff; }
04. Animasjonsbeholder
Innholdsbeholderen det refereres til med «data-animate» -attributtet, har spesifikke stiler brukt. Størrelsen er satt til å matche den fulle størrelsen på skjermen ved hjelp av vw og vh måleenheter, i tillegg til at den blir litt rotert. En animasjon kalt 'moveIn' brukes, som varer i 20 sekunder og gjentar seg uendelig.
[data-animate = "flytt inn"] {posisjon: relativ; bredde: 100vw; høyde: 100vh; opasitet: 1; animasjon: moveIn 20s infinite; tekstjustering: sentrum; transformer: roter (20deg); }
05. Animasjonsinnvielse
Animasjonen 'moveIn' som det er referert til i forrige trinn, krever en definisjon ved hjelp av @keyframes. Den første rammen som starter ved 0% av animasjonen, angir standard skriftstørrelse, plassering av tekst og synlig skygge. I tillegg er varen satt med null opasitet slik at den i utgangspunktet er usynlig - dvs. vises utenfor synet.
@keyframes moveIn {0% {font-size: 1em; venstre: 0; opasitet: 0; tekst-skygge: ingen; } * * * TRINN 6 HER}
06. Animer til synet
Den neste rammen plasseres på 10% gjennom animasjonen. Denne rammen setter opasiteten til fullt synlig, noe som resulterer i at teksten gradvis blir animert til visning.I tillegg tilføres flere skygger med blå og synkende fargeværdier for å gi illusjonene av 3D-dybde til teksten.
10% {opasitet: 1; tekst-skygge: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * TRINN 7 HER
07. Avslutt animasjonen
De endelige bildene skjer på 80% og helt på slutten av animasjonen. Disse er ansvarlige for å øke skriftstørrelsen og flytte elementet mot venstre. Nye innstillinger brukes også for at tekstskyggen skal animeres mot, mens de også falmer teksten ut av visningen fra rammer 80% til 100%.
80% {skriftstørrelse: 8 em; venstre: -8em; opasitet: 1; } 100% {font-size: 10em; venstre: -10em; opasitet: 0; tekst-skygge: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Merk: Uansett hvilket prosjekt du går i gang med, er det viktig å ha skylagring som kan takle (vår guide hjelper).
Denne artikkelen ble opprinnelig publisert i utgave 273 av det kreative webdesignmagasinet Web Designer. Kjøp utgave 273 her eller abonner på Web Designer her.
