Váš titul je jednou z najdôležitejších častí vašej domovskej stránky. To je zvyčajne to, čo vidíte ako prvé, a teda to, čo určuje prvý dojem. Ako každý iný prvý dojem, chcete, aby to bolo dobré. Teraz, ak hľadáte kreatívny spôsob prezentácie svojho titulu, bude vás tento návod baviť, pretože vám ukážeme, ako pridať animácie textových blokov CSS do vášho titulu, a môžete si tiež zadarmo stiahnuť súbor JSON s rozložením!
prehľad
Predtým, ako sa ponoríme do tutoriálu, pozrime sa na výsledok v rôznych veľkostiach obrazovky.
Začnime s návrhom
Pridajte časť # 1
Gradient pozadia
Začnite pridaním bežnej sekcie na novú stránku alebo na stránku, na ktorej pracujete. Otvorte nastavenia sekcie a použite nasledujúce pozadie prechodu:
- Farba 1: # f0f2b
- Farba 2: # c10b1a
- Typ gradientu: lineárny
- Smer sklonu: 63 °
vzdialenosť
Prejdite na kartu návrh sekcie a na rôzne veľkosti obrazovky použite nasledujúce vlastné horné a spodné hodnoty výplne:
- Vrchná výplň: 7vw (stolná), 20vw (tablet), 25vw (telefón)
- Výplň spodná: 7Vw (stôl), 20vw (tablet), 25vw (telefón)
hraničné
Do sekcie pridajte aj ohraničenie.
- Šírka okrajov: 2vw (horná, ľavá, pravá)
- Šírka dolného okraja: 0vw
- Farba orámovania: #ffffff
Pridať nový riadok
Štruktúra stĺpcov
Pokračujte v pridávaní nového riadku do sekcie pomocou nasledujúcej štruktúry stĺpcov:
dimenzovanie
Otvorte parametre linky a podľa toho upravte parametre dimenzovania:
- Šírka: 100%
- Maximálna šírka: 100%
Pridajte do stĺpca textový modul
Pridajte obsah H1
Potom pridajte textový modul s titulom H1 podľa vášho výberu.
Ku každému slovu v názve H1 pridajte značky Div
Prepnite na kartu textu v kópii názvu a ku každému slovu v názve pridajte inú časť div. ID CSS musí byť pre každé slovo odlišné.
Pripravený
o
Stavať
Nádhera
Webové stránky?
Nastavenia textu H1
Prepnite na kartu návrhu modulu a podľa toho zmeňte nastavenie textu H1:
- Písmo názvu: Work Sans
- Hmotnosť písma názvu: stredná
- Farba textu hlavičky: #ffffff
- Veľkosť textu hlavičky: 4vw (desktop), 5vw (tablet), 6vw (telefón)
- Výška čiary hlavy: 1,4 em
vzdialenosť
Potom zmeňte hodnoty okrajov na rôznych veľkostiach obrazovky.
- Ľavý okraj: 20 VW (stôl a tablet), 15 VW (telefón)
- Pravý okraj: 35vw (stolný počítač), 20vw (tablet), 15vw (telefón)
Pridajte do stĺpca kódový modul
Vložte kód CSS
Aby sa animácia textového bloku mohla vzťahovať na náš nadpis, budeme potrebovať nejaký kód CSS. Tento kód CSS pridá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>
vzdialenosť
Prepnite na kartu návrhu modulu a odstráňte všetky predvolené spodné polstrovanie.
- Dolný okraj: 0px
Pridajte do stĺpca modul tlačidiel
Pridajte kópiu
Ďalším modulom, ktorý potrebujeme, je gombíkový modul. Zadajte kópiu podľa vášho výberu.
Nastavenia tlačidiel
Prepnite na kartu návrhu modulu a podľa toho zmeňte nastavenie tlačidiel:
- Pre tlačidlo použite vlastné štýly: Áno
- Veľkosť textu tlačidla: 1vw (počítač), 2vw (tablet), 3vw (telefón)
- Farba textu tlačidla: #ffffff
- Farba pozadia tlačidla: # 000000
- Šírka okraja tlačidla: 0px
- Písmo tlačidla: Work Sans
vzdialenosť
Potom prejdite na nastavenie medzery a na rôzne veľkosti obrazovky použite vlastné hodnoty okrajov a výplne.
- Horný okraj: 3vw (kancelária),
- Ľavý okraj: 20 VW (stôl a tablet), 15 VW (telefón)
- Vrchná výplň: 1.2vw (stolná), 2vw (tablet), 4vw (telefón)
- Výplň spodná: 1.2Vw (stôl), 2vw (tablet), 4vw (telefón)
- Ľavé čalúnenie: 1.8vw (stolný počítač), 3vw (tablet), 6vw (telefón)
- Pravá výplň: 1.8vw (stôl), 3vw (tablet), 6vw (telefón)
animácie
Prispôsobte si tiež nastavenie animácie.
- Štýl animácie: Flip
- Smer animácie: dole
- Oneskorenie animácie: 2000 ms
- Intenzita animácie: 100%
- Nepriehľadnosť začiatku animácie: 100%
- Krivka rýchlosti animácie: easy-in-out
- Opakovanie animácie: raz
Pridajte časť # 2
Pokračujte pridaním novej pravidelnej sekcie tesne pod predchádzajúcu.
vzdialenosť
Otvorte nastavenia sekcie a odstráňte predvolené horné vypchávky.
- Horná vypchávka: 0px
Pridať nový riadok
Štruktúra stĺpcov
Pokračujte v pridávaní nového riadku pomocou nasledujúcej štruktúry stĺpcov:
dimenzovanie
Bez pridania ďalších modulov otvorte parametre linky a nechajte linku zaberať celú šírku kontajnera sekcie.
- Šírka: 100%
- Maximálna šírka: 100%
Pridajte do stĺpca textový modul
Pridajte obsah
Ďalej pridajte textový modul s a obsah popis podľa vlastného výberu.
Farba pozadia
Pridajte bielu farbu pozadia.
- Farba pozadia: #ffffff
Nastavenia textu
Prepnite na kartu návrhu modulu a podľa toho zmeňte nastavenie textu:
- Písmo textu: Work Sans
- Farba textu: # 9b9b9b
- Veľkosť textu: 1vw (počítač), 2vw (tablet), 3vw (telefón)
- Výška riadku textu: 2.6em
vzdialenosť
Pridajte tiež vlastné hodnoty medzery pre rôzne veľkosti obrazovky.
- Horný okraj: -5vw (stolný počítač), -20vw (tablet), -27vw (telefón)
- Ľavý okraj: 20 V (stôl), 13 V (tablet), 8 V (telefón)
- Pravý okraj: 20vw (stolný počítač), 13vw (tablet), 8vw (telefón)
- Vrchné čalúnenie: 5vw (stolné), 7vw (tablet a telefón)
- Spodné čalúnenie: 5vw (stôl), 7vw (tablet a telefón)
- Ľavé čalúnenie: 3vw (stolný počítač), 5vw (tablet), 6vw (telefón)
- Pravá výplň: 3vw (stôl), 5vw (tablet), 6vw (telefón)
Tieňová skrinka
Dokončite nastavenia modulu použitím jemného tieňa políčka. To je všetko!
- Sila rozostrenia tieňa škatule: 50px
- Farba tieňa: rgba (0,0,0,0,1)
prehľad
Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.
záverečné myšlienky
V tomto článku sme si ukázali, ako pridať animácie textových blokov CSS do názvu. Je dôležité zabezpečiť, aby bol váš nadpis viditeľný a čítaný od začiatku. Pridanie animácie k vášmu názvu môže určite pomôcť! Tiež ste si mohli zadarmo stiahnuť súbor JSON s rozložením. Ak máte akékoľvek otázky alebo návrhy, neváhajte zanechať komentár v sekcii komentárov nižšie.
Preložené z: ElegantThemes
