Hur man kodar Smart Text Effects med CSS

Sep 14, 2025
Hur
Image: Middle Child
[Bild: mellanbarn]

Rollover Links är ett bra sätt att ta en användares uppmärksamhet, speciellt om de gör något ovanligt eller original. Mellanbarn har en stor effekt, sällan sett någon annanstans, som fångar varje brev och delar dem ifrån varandra med animering, som sparkar in när besökaren svänger över ordet. Animationen hjälper till att förmedla smörgåsens lekfulla karaktär.

I den här artikeln visar vi dig hur du återställer effekten på din webbplats. För mer inspiration, ta en titt på vår guide till Bästa CSS-animationsexempel (Med instruktioner om hur du kodar dem). För något lite annorlunda, prova en topp Website Builder eller vår plocka av det bästa molnlagring . Och om du gör din webbplats mer komplex, se till att du är webbhotell är på punkt.

01. ROVEROVER TEXT EFFECT

En av de stora texteffekterna på mitten av barnets webbplats är för de övergångseffekter på menyn, där bokstäverna delas ihop på texten och rotera något. Starta detta med några enkla HTML-taggar. 

 & lt; div class = "wrapper" & gt;
& lt; div class = "ord" & gt; frukost & lt; / div & gt;
& lt; / div & gt;

02. Skapa CSS

Använd en separat CSS-fil eller stilkoder för att lägga till följande CSS-regler och gör sidan Fyll i den fullständiga storleken på webbläsaren genom att se till att kroppen och omslaget tar full höjd tillgänglig. 

 kropp {
Bredd: 100%;
Höjd: 100%;
Marginal: 0;
Padding: 0;
}
.wrapper {
Visa: Grid;
Höjd: 100%;
}

03. Placera ordet

De ord klass centra ordet i rutnätet. Vilken text som helst som ges ord klassen kan ha detta tillämpat. De upp Klassen kommer att tillämpas på alla andra brev och de kommer att röra sig uppåt. 

. Större {
FONT-STORLEK: 3EM;
Marginal: Auto Auto;
}

.word .up
{
Visa: Inline-block;
Transform: Translate3d (0px, 0px, 0px)
Rotera (0deg);
Övergång: Alla 0,5-tums lätta in-out;
}

04. upp och över

Nu den ner klassen delar mycket liknande inställningar till upp Men svängen visar rörelsen uppåt för upp rulla över. Uppåt roteras också något för att förbättra utseendet. 

. Större
{
Visa: Inline-block;
Transform: Translate3d (0px, 0px, 0px)
Rotera (0deg);
Övergång: Alla 0,5-tums lätta in-out;
}

.Word: Hover .up
{
Transform: Translate3d (0px, -8px, 0px)
rotera (12deg);
Färg: # 058B05
}

05. Håller ner

När användaren svänger över texten flyttar nedklassen texten nedåt. Senare i JavaScript kommer texten att delas upp i separata spänner med de klasser som läggs till automatiskt till alternativa spänner. 

. Större: Hover .Down {
Transform: Translate3d (0px, 8px, 0px)
rotera (-12deg);
Färg: # 058B05;
}

06. Automatisk för folket

Det är lite av ett krångel att behöva lägga varje bokstav i alternerande spänner med olika klasser, så vi automatiserar processen genom att få JavaScript för att fråga väljaren och ta varje bokstav. Här str Variabel Grabbar det aktuella bokstaven som det slingrar genom texten. 

 & lt; script & gt;
var element = document.query sectorall
('.ord');
för (var i = 0, l = element.slut; i
& lt; l; i ++) {
var str = element [i] .TextContent;
element [i] .innerhtml = '';

07. Lägg till alternerande klasser

Nu lägger en annan loop varje brev i sitt eget spänningselement och lägger till antingen upp eller ner klass till spännen. Om du tittar på det här i webbläsaren ser du texten upp och ner, samtidigt som du roterar något.

Du kan se effekten i åtgärd på Mellanbarns hemsida . 

 för (var j = 0, ll = str.length; j
& lt; 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);
}
 }
& lt; / script & gt;

Den här artikeln publicerades ursprungligen i kreativ webbdesignmagasin Webbdesigner . Köp nummer 286 eller prenumerera .

Läs mer:

  • Lägg till SVG-filter med CSS
  • Hur man designar med CSS-former: en introduktion
  • 5 COOL CSS Grid Generators

Hur - Mest populära artiklar

Förbättra dina konceptkonstkunskaper i Photoshop

Hur Sep 14, 2025

För den här workshopen skulle jag vilja visa dig ett riktigt roligt sätt att skissa karaktärer från bara din fantasi. Jag sk..

Skapa en vektorförskjutningsmaskborste

Hur Sep 14, 2025

Missa inte Vertex 2018 , vår debutevenemang för CG-gemenskapen. Förpackad med inspirer..

Hur man skulpterar ett tecken i VR

Hur Sep 14, 2025

Sida 1 av 2: Sida 1 Sida 1 Sida 2 ..

En introduktion till front-testning

Hur Sep 14, 2025

Sida 1 av 2: Olika typer av frontendest (och när du ska använda dem) Ol..

Kom igång med HTML Canvas

Hur Sep 14, 2025

HTML & LT; Canvas & GT; Element är en kraftfull lösning för att skapa pixelbaserad grafik på webben med Javas..

Skapa en portal effekt i Maya

Hur Sep 14, 2025

Den portalen i Dr Strange var mycket speciell. Det var ganska mycket den enda effekten i filmen som inte lutade mer mot rörelse ..

Hur man skapar en vacker vattenfärg landskapsmålning

Hur Sep 14, 2025

Gruvan är en ganska impressionistisk stil av en akvarell målningsteknik , där detalj är mindre viktigt än en ..

Hur man mästare 3d fan art

Hur Sep 14, 2025

Efter att ha tittat på den första säsongen av tv-serien, visste jag att jag var tvungen att göra min egen 3d konst ..

Kategorier