Innehåll
- 01. Övergångseffekt
- 02. Skapa CSS
- 03. Placera ordet
- 04. Upp och över
- 05. Svävar neråt
- 06. Automatisk för folket
- 07. Lägg till alternerande klasser
Övergångslänkar är ett utmärkt sätt att fånga användarens uppmärksamhet, särskilt om de gör något ovanligt eller originellt. Middle Child har en stor effekt, sällan sett någon annanstans, som fångar varje bokstav och delar upp dem med animering, som sparkar in när besökaren svävar över ordet. Animationen hjälper till att förmedla sandwichvarumärkets lekfulla karaktär.
I den här artikeln visar vi dig hur du återskapar effekten på din webbplats. För mer inspiration, ta en titt på vår guide till de bästa CSS-animeringsexemplen (med instruktioner om hur du kodar dem). För något lite annorlunda, prova en toppwebbplatsbyggare eller vårt urval av det bästa molnlagringen. Och om du gör din webbplats mer komplex, se till att ditt webbhotell är på plats.
01. Övergångseffekt
En av de stora texteffekterna på Middle Child-webbplatsen är för överrullningseffekter på menyn, där bokstäverna delas isär på texten och roterar något. Börja med några enkla HTML-taggar.
div> div> Frukost / div> / div>
02. Skapa CSS
Använd en separat CSS-fil eller stiltaggar för att lägga till följande CSS-regler och få sidan att fylla webbläsarens fulla storlek genom att se till att kroppen och omslaget tar full tillgänglig höjd.
kropp {bredd: 100%; höjd: 100%; marginal: 0; stoppning: 0; } .omslag {display: grid; höjd: 100%; }
03. Placera ordet
De ord klass centrerar ordet i rutnätet. Alla texter som ges ord klass kan låta detta tillämpas. De upp klass kommer att tillämpas på varannan bokstav och dessa kommer att gå uppåt.
.word {font-size: 3em; marginal: auto auto; } .word .up {display: inline-block; transform: translate3d (0px, 0px, 0px) rotera (0deg); övergång: alla 0,5s lätthet-in-ut; }
04. Upp och över
Nu den ner klass delar mycket liknande inställningar för upp men svävaren visar rörelsen uppåt för upp rulla över. Uppåt roteras också något för att förbättra utseendet.
.word .down {display: inline-block; transform: translate3d (0px, 0px, 0px) rotera (0deg); övergång: alla 0,5s lätthet-in-ut; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotera (12deg); färg: # 058b05}
05. Svävar neråt
När användaren svävar över texten flyttar nedklassen texten nedåt. Senare i JavaScript kommer texten att delas upp i separata spänningar där klasserna läggs till automatiskt i alternativa spänningar.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotera (-12deg); färg: # 058b05; }
06. Automatisk för folket
Det är lite besvär att behöva lägga varje bokstav i alternerande spännvidd med olika klasser, så vi automatiserar processen genom att få JavaScript att fråga om väljaren och ta varje bokstav. Här är str variabeln tar tag i den aktuella bokstaven när den går igenom texten.
skript> var-element = document.querySelectorAll (’.word’); för (var i = 0, l = elements.length; i l; i ++) {var str = element [i] .textContent; element [i] .innerHTML = ’’;
07. Lägg till alternerande klasser
Nu placerar en annan slinga varje bokstav i sitt eget spannelement och lägger till antingen upp eller ner klass till spännen. Om du tittar på detta i webbläsaren ser du att texten delas upp med varje bokstav upp och ner medan du roterar något.
Du kan se effekten i aktion på webbplatsen Middle Child.
för (var j = 0, ll = str.längd; j ll; j ++) {var spn = document.createElement (’span’); element [i] .appendChild (spn); spn.textContent = str [j]; låt pos = (j% 2)? 'upp ner'; spn.classList.add (pos); }} / skript>
Den här artikeln publicerades ursprungligen i kreativ tidskrift för webbdesign Webbdesigner.Köp nummer 286 eller prenumerera.
