Vytvoření animace posouvání na pozadí textu je jedinečný způsob, jak do textu přidat barevné animované textury. Webové stránky zatímco uživatel posouvá stránku. S divi, proces je překvapivě snadný, jakmile se naučíte několik klíčových technik.
V tomto tutoriálu použijeme pouze sílu vestavěných parametrů divi vytvořit 3 jedinečné návrhy, které obsahují animaci posouvání na barevném pozadí textu. Dokonce vám ukážeme, jak vytvořit tmavou verzi každého designu pro zcela nový vzhled.
Začněme!
Možný výsledek
Zde je pohled na designy, které dnes budeme stavět.
Návrh 1: Přechod na pozadí textu s efektem vodorovného posouvání
Tento první design bude obsahovat efekt horizontálního posouvání, který animuje barevný oddělovací modul za textovým modulem s obrazovkovým filtrem.
Přidejte sloupec
Začněte tím, že do výchozí sekce přidáte řádek jednoho sloupce.
Přidat textový modul
Poté do sloupce přidejte nový textový modul.
Obsah
pro obsah vložte do pole následující kód HTML obsah:
Formátování textu
Poté aktualizujte návrh textu následujícím způsobem:
- Barva pozadí: #ffffff
- Styl písma textu: TT
- Barva textu: # 000000
- Velikost textu: 100 px (na ploše), 40 px (na telefonu)
- Mezery mezi textem: 0.15m
- Výška řádku textu: 1em
- Zarovnání textu: střed
- Písmo názvu: Merriweather
- Hmotnost písma nadpisu: tučně
- Styl písma názvu: TT
- Zarovnání textu záhlaví: Střed
- Barva textu záhlaví: # 000000
- Velikost textu záhlaví: 200px (stolní počítač), 80px (telefon)
- Mezery mezi titulky: 0.15m
- Výška záhlaví: 1em
Výplň a filtr
Nyní musíme do textového modulu přidat nějaké polstrování a filtr obrazovky. Aby tento design fungoval, je nutný filtr, který umožňuje zobrazování barev / modů pozadí za textem.
Chcete-li přidat výplň a filtr, aktualizujte následující:
- polstrování: 15px vysoká, 20px nízká
- Režim prolnutí: obrazovka
Poznámka: Režim prolnutí obrazovky funguje nejlépe s černým textem na bílém pozadí. Pokud bychom chtěli použít bílý text na černém pozadí, použili bychom režim míchání Multiply.
Horní a dolní odlučovač
Po dokončení našeho textového modulu přidáme některé oddělovače (nad a jeden pod textový modul) pro další konstrukční prvek.
Přidejte spodní oddělovač
Přidejte nový textový modul pod textový modul.
Vyšší nastavení separace
Otevřete nastavení oddělovače a výběrem NO zobrazte oddělovač.
Poté aktualizujte pozadí a poskytněte děliči stejný režim prolnutí jako textový modul následujícím způsobem:
- Barva pozadí levého přechodu: # 000000
- Barva přechodu vpravo: #ffffff
- Směr přechodu: 90deg
- Počáteční pozice: 48%
- Koncová pozice: 0%
- Režim prolnutí: obrazovka
Poté aktualizujte výšku děliče na obrazovce telefonu následujícím způsobem:
- Výška: 15px (telefon)
Přidejte horní oddělovač
Chcete-li vytvořit horní dělič, duplikujte předchozí spodní dělič a přetáhněte jej nad textový modul pomocí oblasti zobrazení vrstev.
Poté obraťte barvy na pozadí přechodu.
Aktualizujte parametry linky
Jakmile jsou naše horní a dolní oddělovače na svém místě, aktualizujte parametry řádků takto:
- Šířka okapu: 1 (k odstranění spodních okrajů mezi moduly)
- Maximální šířka: 600 pixelů (pro zachování soudržného designu na ploše a tabletu)
- Zarovnání čáry: střed
- Výplň: 0px vysoká, 0px nízká
- Horizontální přetečení: skryté
- Vertikální přetečení: skryté
Vytvořte oddělovač pro barvu pozadí animovaného textu
Posledním prvkem tohoto prvního návrhu je dělič, který použijeme k animaci barvy pozadí textu na svitku. Chcete-li to provést, přidejte nový oddělovací modul pod spodní dělič.
Poté zvolte NO pro zobrazení oddělovače.
Nastavení děliče pozadí
Aktualizujte oddělovač s přechodovým pozadím takto:
- Barva pozadí levého přechodu: # e02b20
- Barva přechodu na pravé pozadí: # 8300e9
- Směr přechodu: 90deg
- Počáteční pozice: 30%
- Koncová pozice: 70%
Chceme, aby výška oddělovače byla dostatečně vysoká, aby zbarvila veškerý náš text v textovém modulu a horní a dolní oddělovače. U tohoto designu nastavte výšku na 400 pixelů.
- Výška: 400px
Poté dejte rozdělovači absolutní polohu tak, aby byla umístěna přímo nad ostatní moduly. Pomocí indexu Z umístěte dělič za ostatní moduly.
- Pozice: Absolutní
- Z index: -1
Efekty rozdělovače pozadí
Když je oddělovač na svém místě, vše, co musíme udělat, je přesunout oddělovač za text pomocí efektů posouvání divi. Pro tento design jednoduše přidáme horizontální pohyb na svitku.
Aktualizujte následující položky:
Na kartě Horizontální pohyb ...
Kancelář
- Aktivujte horizontální pohyb: ANO
- Počáteční posun: 6 (při 20%)
- Průměrný ofset: 0 (při 40% -60%)
- Koncový offset: -6 (při 80%)
telefon
- Počáteční posun: 3
- Koncový offset: -3
Nezapomeňte také nastavit spoušť pohybového efektu uprostřed klipu:
- Efekt spouštěcího pohybu: střed prvku
Přidejte mezery mezi sekcemi
Chcete-li vytvořit dočasný rolovací prostor pro testování návrhu, přidejte do sekce následující:
- Marže: 80vh výše, 80vh níže
Závěrečné myšlenky
Návrhy animací pozadí textu zobrazené v tomto článku by ve skutečnosti fungovaly dobře jako statický návrh bez pohybu přidání na svitku. Díky dalším efektům posouvání se však design skutečně posune na zcela novou úroveň. Nebojte se experimentovat s více barvami a efekty!
Nemůžu se dočkat, až se ozvu v komentářích.
K vašemu zdraví!
