Váš titul je jednou z nejdůležitějších částí vaší domovské stránky. To je obvykle to, co vidíte jako první, a tedy to, co určuje první dojem. Jako každý jiný první dojem chcete, aby to bylo dobré. Nyní, pokud hledáte kreativní způsob, jak představit svůj titul, bude vás tento návod bavit, protože vám ukážeme, jak přidat animace textových bloků CSS do vašeho titulu, a můžete si také zdarma stáhnout soubor JSON s rozložením!
přehled
Než se ponoříme do tutoriálu, pojďme se podívat na výsledek na různých velikostech obrazovky.
Začněme s designem
Přidat oddíl # 1
Přechodové pozadí
Začněte přidáním běžné sekce na novou stránku nebo na stránku, na které pracujete. Otevřete nastavení sekce a použijte následující pozadí přechodu:
- Barva 1: # f0f2b
- Barva 2: # c10b1a
- Typ přechodu: lineární
- Směr přechodu: 63deg
vzdálenost
Přepněte na kartu Návrh sekce a použijte následující vlastní horní a dolní hodnoty výplně v různých velikostech obrazovky:
- Horní výplň: 7vw (stolní), 20vw (tablet), 25vw (telefon)
- Spodní výplň: 7vw (stůl), 20vw (tablet), 25vw (telefon)
hraniční
Do sekce také přidejte ohraničení.
- Šířka okraje: 2vw (horní, levá, pravá)
- Šířka dolního okraje: 0vw
- Barva ohraničení: #ffffff
Přidat nový řádek
Struktura sloupců
Pokračujte v přidávání nového řádku do sekce pomocí následující struktury sloupců:
dimenzování
Otevřete parametry linky a podle toho upravte parametry kótování:
- Šířka: 100%
- Maximální šířka: 100%
Do sloupce přidejte textový modul
Přidat obsah H1
Poté přidejte textový modul s názvem H1 podle vašeho výběru.
Ke každému slovu v názvu H1 přidejte značky Div
Přepněte na kartu textu v titulní kopii a ke každému slovu v názvu přidejte jiný div. ID CSS musí být pro každé slovo jiné.
Připraven
na
Stavět
Krásná
Webové stránky?
Nastavení textu H1
Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení textu H1:
- Písmo názvu: Work Sans
- Hmotnost písma nadpisu: střední
- Barva textu záhlaví: #ffffff
- Velikost textu záhlaví: 4vw (desktop), 5vw (tablet), 6vw (telefon)
- Výška hlavové linie: 1,4 em
vzdálenost
Poté změňte hodnoty okrajů na různých velikostech obrazovky.
- Levý okraj: 20vw (stůl a tablet), 15vw (telefon)
- Pravý okraj: 35vw (stolní), 20vw (tablet), 15vw (telefon)
Do sloupce přidejte modul kódu
Vložte kód CSS
Aby se animace textového bloku použila na náš název, budeme potřebovat nějaký kód CSS. Tento kód CSS přidáme do nového modulu kódu.
<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>
vzdálenost
Přepněte na kartu návrhu modulu a odeberte všechny výchozí spodní polstrování.
- Dolní okraj: 0px
Do sloupce přidejte modul tlačítek
Přidat kopii
Další modul, který potřebujeme, je knoflíkový modul. Zadejte kopii podle vašeho výběru.
Nastavení tlačítek
Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení tlačítek:
- Pro tlačítko použijte vlastní styly: Ano
- Velikost textu tlačítka: 1vw (stolní), 2vw (tablet), 3vw (telefon)
- Barva textu tlačítka: #ffffff
- Barva pozadí tlačítka: # 000000
- Šířka ohraničení tlačítka: 0px
- Tlačítko písmo: Work Sans
vzdálenost
Poté přejděte na nastavení mezer a použijte vlastní hodnoty okrajů a výplně na různé velikosti obrazovky.
- Horní okraj: 3vw (kancelář),
- Levý okraj: 20vw (stůl a tablet), 15vw (telefon)
- Horní výplň: 1.2vw (stolní), 2vw (tablet), 4vw (telefon)
- Spodní výplň: 1.2vw (stůl), 2vw (tablet), 4vw (telefon)
- Levé čalounění: 1.8vw (stolní), 3vw (tablet), 6vw (telefon)
- Pravá výplň: 1.8vw (stůl), 3vw (tablet), 6vw (telefon)
Animace
Upravte také nastavení animace.
- Styl animace: Flip
- Směr animace: dolů
- Zpoždění animace: 2000 XNUMX ms
- Intenzita animace: 100%
- Neprůhlednost začátku animace: 100%
- Křivka rychlosti animace: snadnost vstupu
- Opakování animace: jednou
Přidat oddíl # 2
Pokračujte přidáním nové pravidelné sekce těsně pod předchozí.
vzdálenost
Otevřete nastavení sekce a odeberte výchozí horní výplň.
- Horní výplň: 0px
Přidat nový řádek
Struktura sloupců
Pokračujte v přidávání nového řádku pomocí následující struktury sloupců:
dimenzování
Bez přidání dalších modulů otevřete parametry linky a nechte linku zabírat celou šířku kontejneru sekce.
- Šířka: 100%
- Maximální šířka: 100%
Do sloupce přidejte textový modul
Přidat obsah
Dále přidejte textový modul s a obsah popis dle vašeho výběru.
Barva pozadí
Přidejte bílou barvu pozadí.
- Barva pozadí: #ffffff
Nastavení textu
Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení textu:
- Textové písmo: Work Sans
- Barva textu: # 9b9b9b
- Velikost textu: 1vw (stolní), 2vw (tablet), 3vw (telefon)
- Výška řádku textu: 2.6em
vzdálenost
Přidejte také vlastní hodnoty mezer na různé velikosti obrazovky.
- Horní okraj: -5vw (stolní), -20vw (tablet), -27vw (telefon)
- Levý okraj: 20vw (stůl), 13vw (tablet), 8vw (telefon)
- Pravý okraj: 20vw (stolní), 13vw (tablet), 8vw (telefon)
- Horní výplň: 5vw (stolní), 7vw (tablet a telefon)
- Spodní výplň: 5vw (stůl), 7vw (tablet a telefon)
- Levé čalounění: 3vw (stolní), 5vw (tablet), 6vw (telefon)
- Pravá výplň: 3vw (stůl), 5vw (tablet), 6vw (telefon)
Stínová krabička
A dokončete nastavení modulu použitím jemného stínu rámečku. A je to!
- Síla stínění stínu: 50px
- Barva stínu: rgba (0,0,0,0,1)
přehled
Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.
Závěrečné myšlenky
V tomto článku jsme vám ukázali, jak přidat animace textových bloků CSS k názvu. Je důležité zajistit, aby byl váš titul viditelný a čitelný hned od začátku, přidání animace k vašemu názvu může rozhodně pomoci! Také jste si mohli stáhnout soubor JSON s rozložením zdarma. Máte-li jakékoli dotazy nebo návrhy, neváhejte zanechat komentář v sekci komentáře níže.
Přeloženo z: ElegantThemes
