Vytvorenie animácie posúvania na pozadí textu je jedinečný spôsob, ako do textu pridať farebné animované textúry. webové stránky keď používateľ posúva stránku. s divi, proces je prekvapivo jednoduchý, keď sa naučíte niekoľko kľúčových techník.
V tomto návode použijeme iba silu vstavaných parametrov divi vytvoriť 3 jedinečné návrhy, ktoré obsahujú animáciu posúvania na pozadí s farebným textom. Dokonca vám ukážeme, ako vytvoriť tmavú verziu každého dizajnu pre úplne nový vzhľad.
Začnime!
Možný výsledok
Tu je prehľad návrhov, ktoré dnes postavíme.
Dizajn 1: Prechod na pozadí textu s efektom vodorovného posúvania
Tento prvý dizajn bude obsahovať efekt horizontálneho posúvania, ktorý animuje farebný oddeľovač za textovým modulom pomocou filtra na obrazovke.
Pridajte stĺpec
Ak chcete začať, do predvolenej sekcie pridajte riadok s jedným stĺpcom.
Pridajte textový modul
Potom do stĺpca pridajte nový textový modul.
Obsah
pre obsah do poľa vložte nasledujúci kód HTML obsah:
Formátovanie textu
Potom aktualizujte návrh textu nasledovne:
- Farba pozadia: #ffffff
- Štýl písma textu: TT
- Farba textu: # 000000
- Veľkosť textu: 100 px (na pracovnej ploche), 40 px (na telefóne)
- Riadkovanie textu: 0.15em
- Výška riadku textu: 1em
- Zarovnanie textu: stred
- Písmo názvu: Merriweather
- Hmotnosť písma názvu: tučné
- Štýl písma názvu: TT
- Zarovnanie textu hlavičky: na stred
- Farba textu hlavičky: # 000000
- Veľkosť textu hlavičky: 200px (stolný počítač), 80px (telefón)
- Riadkovanie písmen názvu: 0.15em
- Výška nadpisu: 1em
Výplň a filter
Teraz musíme do textového modulu pridať nejaké polstrovanie a filter obrazovky. Aby tento dizajn fungoval, je potrebný filter, ktorý umožňuje, aby sa za textom zobrazovali farby / mody pozadia.
Ak chcete pridať výplň a filter, aktualizujte nasledujúce informácie:
- výplň: vysoká 15px, nízka 20px
- Režim prelínania: obrazovka
Poznámka: Režim prelínania obrazovky funguje najlepšie s čiernym textom na bielom pozadí. Ak by sme chceli použiť biely text na čiernom pozadí, použili by sme režim Viacnásobné prelínanie.
Horný a dolný oddeľovač
Po dokončení nášho textového modulu pridajte niektoré oddeľovače (nad a jeden pod textový modul) pre ďalší konštrukčný prvok.
Pridajte dolný oddeľovač
Pridajte nový textový modul pod textový modul.
Vyššie nastavenie separácie
Otvorte nastavenia oddeľovača a výberom položky NO zobrazte oddeľovač.
Potom aktualizujte pozadie a poskytnite rozdeľovaču rovnaký režim prelínania ako textový modul, a to nasledovne:
- Farba pozadia vľavo: # 000000
- Farba pozadia s prechodom vpravo: #ffffff
- Smer sklonu: 90deg
- Počiatočná pozícia: 48%
- Koncová pozícia: 0%
- Režim prelínania: obrazovka
Potom aktualizujte výšku rozdeľovača na obrazovke telefónu takto:
- Výška: 15px (telefón)
Pridajte horný oddeľovač
Ak chcete vytvoriť horný rozdeľovač, duplikujte predchádzajúci spodný rozdeľovač a presuňte ho nad textový modul pomocou oblasti zobrazenia vrstiev.
Potom obráťte farby na pozadí s prechodom.
Aktualizujte parametre linky
Akonáhle sú naše horné a dolné oddeľovače na mieste, aktualizujte parametre linky nasledovne:
- Šírka žľabu: 1 (na odstránenie spodných okrajov medzi modulmi)
- Maximálna šírka: 600 pixlov (na zachovanie koherentného dizajnu na pracovnej ploche a tablete)
- Zarovnanie čiary: stred
- Výplň: vysoká 0px, nízka 0px
- Horizontálny prepad: skrytý
- Vertikálny prepad: skrytý
Vytvorte oddeľovač farby pozadia animovaného textu
Posledným prvkom tohto prvého dizajnu je oddeľovač, ktorý použijeme na animáciu farby pozadia textu na zvitku. Za týmto účelom pridajte nový separačný modul pod spodný rozdeľovač.
Potom zvoľte NO, aby ste zobrazili oddeľovač.
Nastavenia rozdeľovača pozadia
Aktualizujte oddeľovač pomocou pozadia s prechodom takto:
- Farba pozadia vľavo: # e02b20
- Farba gradientu na pravom pozadí: # 8300e9
- Smer sklonu: 90deg
- Počiatočná pozícia: 30%
- Koncová pozícia: 70%
Chceme, aby výška oddeľovača bola dostatočne vysoká na to, aby zafarbil všetok náš text v textovom module a horný a dolný oddeľovač. Pre tento dizajn nastavte výšku na 400 pixelov.
- Výška: 400px
Potom dajte rozdeľovaču absolútnu pozíciu, aby sa umiestnil priamo nad ostatné moduly. Pomocou indexu Z umiestnite rozdeľovač za ostatné moduly.
- Pozícia: Absolútna
- Z index: -1
Efekty rozdeľovača pozadia
Keď je oddeľovač na svojom mieste, všetko, čo musíme urobiť, je presunúť oddeľovač za text pomocou efektov posúvania divi. Pre tento dizajn jednoducho pridáme horizontálny pohyb na rolke.
Aktualizujte nasledujúce položky:
Na karte Horizontálny pohyb ...
kancelária
- Aktivujte horizontálny pohyb: ÁNO
- Počiatočný posun: 6 (pri 20%)
- Priemerný ofset: 0 (pri 40% -60%)
- Koncový posun: -6 (pri 80%)
Telefón
- Počiatočný posun: 3
- Koncový posun: -3
Nezabudnite tiež nastaviť spúšťač pohybového efektu uprostred klipu:
- Efekt spúšťacieho pohybu: stred prvku
Pridajte medzery medzi sekciami
Ak chcete vytvoriť dočasný posúvací priestor na testovanie návrhu, do oddielu pridajte nasledujúci text:
- Marža: 80 Vh nad, 80 Vh pod
záverečné myšlienky
Návrhy animácií pozadia textu zobrazené v tomto článku by v skutočnosti fungovali dobre ako statické návrhy bez pohybu pridania na zvitok. Ďalšie rolovacie efekty však skutočne posúvajú dizajn na úplne novú úroveň. Nebojte sa experimentovať s ďalšími farbami a efektmi!
Teším sa na vaše komentáre.
Na vaše zdravie!
