Din titel är en av de viktigaste delarna av din hemsida. Detta är vanligtvis vad du ser först och därför bestämmer det första intrycket. Som alla andra första intryck vill du att det ska vara bra. Nu, om du letar efter ett kreativt sätt att presentera din titel, kommer du att njuta av denna handledning eftersom vi visar hur du lägger till CSS-textblockanimationer i din titel och du kan också ladda ner layouten JSON-fil gratis!
undersökningen
Innan vi dyker in i handledningen, låt oss ta en titt på resultatet på olika skärmstorlekar.
Låt oss börja designen
Lägg till avsnitt 1
Lutningbakgrund
Börja med att lägga till ett vanligt avsnitt på en ny sida eller till den sida du arbetar med. Öppna sektionsinställningarna och använd följande lutningsbakgrund:
- Färg 1: # f0f2b
- Färg 2: # c10b1a
- Lutningstyp: linjär
- Lutningsriktning: 63deg
avstånd
Byt till fliken sektionsdesign och använd följande anpassade topp- och bottenfyllnadsvärden på olika skärmstorlekar:
- Övre stoppning: 7vw (skrivbord), 20vw (surfplatta), 25vw (telefon)
- Botten stoppning: 7vw (skrivbord), 20vw (surfplatta), 25vw (telefon)
gräns
Lägg också till en ram till sektionen.
- Kantbredd: 2vw (topp, vänster, höger)
- Nedre kantbredd: 0vw
- Kantfärg: #ffffff
Lägg till en ny rad
Kolumnstruktur
Fortsätt att lägga till en ny rad i avsnittet med följande kolumnstruktur:
dimensionering
Öppna linjeparametrarna och ändra dimensioneringsparametrarna i enlighet därmed:
- Bredd: 100%
- Max bredd: 100%
Lägg till en textmodul i kolumnen
Lägg till H1-innehåll
Lägg sedan till en textmodul med en valfri H1-titel.
Lägg till Div-taggar till varje ord i H1-titeln
Byt till textfliken i din titelkopia och lägg till en annan div till varje ord i din titel. CSS-ID: t måste vara olika för varje ord.
Redo
på
Bygga
Skön
Webbplatser?
H1 textinställningar
Byt till fliken moduldesign och ändra H1-textinställningarna i enlighet med detta:
- Titel typsnitt: Work Sans
- Titel typsnitt vikt: medium
- Rubriktextfärg: #ffffff
- Rubriktextstorlek: 4vw (skrivbord), 5vw (surfplatta), 6vw (telefon)
- Huvudlinjens höjd: 1,4 em
avstånd
Ändra sedan marginalvärdena på olika skärmstorlekar.
- Vänster marginal: 20vw (skrivbord och surfplatta), 15vw (telefon)
- Höger marginal: 35vw (skrivbord), 20vw (surfplatta), 15vw (telefon)
Lägg till en kodmodul i kolumnen
Sätt in CSS-kod
För att textblocksanimationen ska kunna tillämpas på vår titel behöver vi lite CSS-kod. Vi lägger till den här CSS-koden i en ny kodmodul.
<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>
avstånd
Byt till fliken moduldesign och ta bort alla standardunderlag.
- Nedre marginal: 0px
Lägg till en knappmodul i kolumnen
Lägg till en kopia
Nästa modul vi behöver är en knappmodul. Ange en kopia efter eget val.
Knappinställningar
Byt till fliken moduldesign och ändra knappinställningarna i enlighet med detta:
- Använd anpassade stilar för knappen: Ja
- Knapptextstorlek: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
- Knapptextfärg: #ffffff
- Knappens bakgrundsfärg: # 000000
- Knappens bredd: 0px
- Knappsnitt: Work Sans
avstånd
Gå sedan till avståndsinställningarna och använd anpassade marginal- och stoppningsvärden på olika skärmstorlekar.
- Övre marginal: 3vw (kontor),
- Vänster marginal: 20vw (skrivbord och surfplatta), 15vw (telefon)
- Övre stoppning: 1.2vw (skrivbord), 2vw (surfplatta), 4vw (telefon)
- Botten stoppning: 1.2vw (skrivbord), 2vw (surfplatta), 4vw (telefon)
- Vänster stoppning: 1.8vw (skrivbord), 3vw (surfplatta), 6vw (telefon)
- Höger stoppning: 1.8vw (skrivbord), 3vw (surfplatta), 6vw (telefon)
animering
Anpassa också animationsinställningarna.
- Animeringsstil: Vänd
- Animeringsriktning: ner
- Animeringsfördröjning: 2000 ms
- Animationsintensitet: 100%
- Animering start opacitet: 100%
- Animationshastighetskurva: enkel in-ut
- Animationsupprepning: en gång
Lägg till avsnitt 2
Fortsätt genom att lägga till ett nytt vanligt avsnitt precis under det föregående.
avstånd
Öppna sektionsinställningarna och ta bort standardöverdelningen.
- Övre stoppning: 0px
Lägg till en ny rad
Kolumnstruktur
Fortsätt att lägga till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till fler moduler, öppna linjeparametrarna och låt linjen uppta hela sektionens behållares bredd.
- Bredd: 100%
- Max bredd: 100%
Lägg till en textmodul i kolumnen
Lägg till innehåll
Lägg sedan till en textmodul med en innehåll beskrivning av ditt val.
Bakgrundsfärg
Lägg till en vit bakgrundsfärg.
- Bakgrundsfärg: #ffffff
Textinställningar
Byt till fliken moduldesign och ändra textinställningarna i enlighet med detta:
- Textstilsort: Work Sans
- Textfärg: # 9b9b9b
- Textstorlek: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
- Höjd på textrad: 2.6em
avstånd
Lägg också till anpassade avståndsvärden på olika skärmstorlekar.
- Övre marginal: -5vw (skrivbord), -20vw (surfplatta), -27vw (telefon)
- Vänster marginal: 20vw (skrivbord), 13vw (surfplatta), 8vw (telefon)
- Höger marginal: 20vw (skrivbord), 13vw (surfplatta), 8vw (telefon)
- Övre stoppning: 5vw (skrivbord), 7vw (surfplatta och telefon)
- Botten stoppning: 5vw (skrivbord), 7vw (surfplatta och telefon)
- Vänster stoppning: 3vw (skrivbord), 5vw (surfplatta), 6vw (telefon)
- Höger stoppning: 3vw (skrivbord), 5vw (surfplatta), 6vw (telefon)
Skugga låda
Och slutför modulinställningarna genom att använda en subtil rutskugga. Det är allt!
- Box Shadow suddighetsstyrka: 50px
- Skuggfärg: rgba (0,0,0,0,1)
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.
Avslutande tankar
I den här artikeln visade vi dig hur du lägger till CSS-textblockanimationer i din titel. Det är viktigt att se till att din titel är synlig och läst från början. Att lägga till animering i din titel kan definitivt hjälpa! Du kunde också ladda ner JSON-filen gratis. Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.
Översatt från: ElegantThemes
