Innhold
- 01. Overføring av teksteffekt
- 02. Opprett CSS
- 03. Plasser ordet
- 04. Opp og over
- 05. Svever nedover
- 06. Automatisk for folket
- 07. Legg til vekslende klasser
Overgangskoblinger er en fin måte å fange brukerens oppmerksomhet på, spesielt hvis de gjør noe uvanlig eller originalt. Middle Child har en stor effekt, sjelden sett andre steder, som fanger hver bokstav og deler dem fra hverandre med animasjon, som sparker inn når den besøkende svever over ordet. Animasjonen hjelper til med å formidle sandwich-merkevarens lekne karakter.
I denne artikkelen viser vi deg hvordan du kan gjenskape effekten på nettstedet ditt. For mer inspirasjon, ta en titt på guiden vår til de beste CSS-animasjonseksemplene (med instruksjoner om hvordan du koder dem). For noe litt annerledes, prøv en topp nettstedbygger eller vårt valg av den beste skylagringen. Og hvis du gjør nettstedet ditt mer komplekst, må du sørge for at webhotellet ditt er på tide.
01. Overføring av teksteffekt
En av de store teksteffektene på nettstedet Middle Child er for overføringseffekter på menyen, der bokstavene deler seg fra hverandre på teksten og roterer litt. Start dette med noen enkle HTML-koder.
div> div> Frokost / div> / div>
02. Opprett CSS
Bruk en egen CSS-fil eller stilkoder for å legge til følgende CSS-regler og få siden til å fylle nettleserens fulle størrelse ved å sikre at kroppen og innpakningen tar full tilgjengelig høyde.
kropp {bredde: 100%; høyde: 100%; margin: 0; polstring: 0; } .wrapper {display: grid; høyde: 100%; }
03. Plasser ordet
De ord klasse sentrerer ordet i rutenettet. Enhver tekst som er gitt ord klasse kan få dette brukt. De opp klasse kommer til å bli brukt på annenhver bokstav, og disse vil bevege seg oppover.
.word {font-size: 3em; margin: auto auto; } .word .up {display: inline-block; transform: translate3d (0px, 0px, 0px) roter (0deg); overgang: alle 0,5s let-in-ut; }
04. Opp og over
Nå er det ned klasse deler veldig lik innstillinger til opp men sveveren viser bevegelsen oppover for opp rull over. Oppover roteres også litt for å forbedre utseendet.
.word .down {display: inline-block; transform: translate3d (0px, 0px, 0px) roter (0deg); overgang: alle 0,5s let-in-ut; } .word: hover .up {transform: translate3d (0px, -8px, 0px) roter (12deg); farge: # 058b05}
05. Svever nedover
Når brukeren svever over teksten, beveger nedklassen teksten nedover. Senere i JavaScript blir teksten delt inn i separate spenn med klassene automatisk lagt til i alternative spenn.
.word: hover .down {transform: translate3d (0px, 8px, 0px) roter (-12deg); farge: # 058b05; }
06. Automatisk for folket
Det er litt bry å måtte legge hver bokstav i vekslende spenn med forskjellige klasser, så vi automatiserer prosessen ved å få JavaScript til å spørre velgeren og ta hver bokstav. Her er str variabel griper gjeldende bokstav når den løper gjennom teksten.
skript> var-elementer = document.querySelectorAll (’.word’); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elementer [i] .innerHTML = ’’;
07. Legg til vekslende klasser
Nå plasserer en annen sløyfe hver bokstav i sitt eget spennelement og legger til enten opp eller ned klasse til spennene. Hvis du ser på dette i nettleseren, vil du se teksten delt med hver bokstav opp og ned, mens du roterer litt.
Du kan se effekten i aksjon på nettstedet Middle Child.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); elementer [i] .appendChild (spn); spn.textContent = str [j]; la pos = (j% 2)? 'opp ned'; spn.classList.add (pos); }} / skript>
Denne artikkelen ble opprinnelig publisert i kreativt magasin for webdesign Webdesigner.Kjøp utgave 286 eller abonnere.
