Indhold
- 01. Rollover teksteffekt
- 02. Opret CSS
- 03. Placer ordet
- 04. Op og over
- 05. Svæver ned
- 06. Automatisk for folket
- 07. Tilføj alternerende klasser
Rollover-links er en fantastisk måde at fange brugerens opmærksomhed på, især hvis de gør noget usædvanligt eller originalt. Middle Child har en stor effekt, sjældent set andre steder, der fanger hvert bogstav og deler dem fra hinanden med animation, som sparker ind, når den besøgende svæver over ordet. Animationen hjælper med at formidle sandwichbrandets legende karakter.
I denne artikel viser vi dig, hvordan du genskaber effekten på dit websted. For mere inspiration, se vores guide til de bedste CSS-animationseksempler (med instruktioner om, hvordan du koder dem). For noget lidt anderledes, prøv en topwebbygger eller vores valg af den bedste skyopbevaring. Og hvis du gør dit websted mere komplekst, skal du sørge for, at din webhosting er i orden.
01. Rollover teksteffekt
En af de store teksteffekter på Middle Child-webstedet er til rollover-effekterne i menuen, hvor bogstaverne deler sig fra hinanden på teksten og roterer let. Start dette med nogle enkle HTML-tags.
div> div> Morgenmad / div> / div>
02. Opret CSS
Brug en separat CSS-fil eller typografikoder til at tilføje følgende CSS-regler og få siden til at udfylde browserens fulde størrelse ved at sikre, at kroppen og indpakningen tager den fulde tilgængelige højde.
krop {bredde: 100%; højde: 100%; margen: 0; polstring: 0; } .wrapper {display: grid; højde: 100%; }
03. Placer ordet
Det ord klasse centrerer ordet i gitteret. Enhver tekst, der får ord klasse kan få dette anvendt. Det op klasse vil blive anvendt på hvert andet bogstav, og disse vil bevæge sig opad.
.word {font-size: 3em; margin: auto auto; } .word .up {display: inline-block; transform: translate3d (0px, 0px, 0px) roter (0deg); overgang: alle 0,5s let-ind-ud; }
04. Op og over
Nu er det ned klasse deler meget lignende indstillinger til op men svæver viser bevægelsen opad for op Rul rundt. Opad roteres også let for at forbedre udseendet.
.word .down {display: inline-block; transform: translate3d (0px, 0px, 0px) roter (0deg); overgang: alle 0,5s let-ind-ud; } .word: hover .up {transform: translate3d (0px, -8px, 0px) roter (12deg); farve: # 058b05}
05. Svæver ned
Når brugeren svæver over teksten, flytter klassen ned teksten nedad. Senere i JavaScript opdeles teksten i separate spænd med klasserne tilføjet automatisk til alternative spænd.
.word: hover .down {transform: translate3d (0px, 8px, 0px) roter (-12deg); farve: # 058b05; }
06. Automatisk for folket
Det er lidt besvær at skulle sætte hvert bogstav i skiftende spændvidde med forskellige klasser, så vi automatiserer processen ved at få JavaScript til at forespørge vælgeren og tage hvert bogstav. Her er str variabel griber det aktuelle bogstav, når det løber gennem teksten.
script> var elements = document.querySelectorAll (’.word’); for (var i = 0, l = elements.length; i l; i ++) {var str = elementer [i] .textContent; elementer [i] .innerHTML = ’’;
07. Tilføj alternerende klasser
Nu placerer en anden sløjfe hvert bogstav i sit eget spanelement og tilføjer enten op eller ned klasse til spændene. Hvis du ser på dette i browseren, vil du se teksten opdelt med hvert bogstav op og ned, mens du roterer let.
Du kan se effekten i aktion på webstedet 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]; lad pos = (j% 2)? 'op ned'; spn.classList.add (pos); }} / script>
Denne artikel blev oprindeligt offentliggjort i kreativt webdesignmagasin Webdesigner.Køb nummer 286 eller abonnere.
