Animace písma se změnou barvy pomocí Elementoru

Upraveno 6 prosince, 2023 06:28

V dnešním článku o efektech Elementoru bych se chtěl podívat na to, jak vytvoříte blok s textem, který se při pohybu bude hýbat a měnit zároveň svou barvu v závislosti na tom, jaké pozadí je zrovna za ním. Níže v uvedeném příkladu je názorná ukázka takového bloku. Při pohybu stránky se posouvá písmo buď na levou nebo pravou stranu, přičemž pokud opustí růžový box, změní jeho část barvu. Jak se tedy animace písma se změnou barvy pomocí Elementoru provádí?

Animace písma se změnou barvy pomocí Elementoru

Celý efekt spočívá ve vytvoření dvou bloků s reverzními barvami, které se budou ve výsledku překrývat. Tedy jeden blok bude mít růžové pozadí a bílé písmo, druhý blok pak bude mít opačně písmo růžové a pozadí bílé. 

Příklad níže slouží pouze pro představu, jak ve výsledku takový efekt vypadá.

zmena_pisma_mobil
adidas
Animace písma se změnou barvy v závislosti na pozadí pomocí Elementoru

                  Vítězné boty za nejlepší cenu

Animace písma se změnou barvy v závislosti na pozadí pomocí Elementoru

Nový pohyb

Nový pohyb

Níže přiložené video ukazuje, jak krok za krokem vytvořit tento efekt. Pro dosažení tohoto efektu je potřeba nastavit dva bloky s opačnými barvami tak, aby se vzájemně kryly. U jednoho z bloků je navíc nastaveno, že písmo, které blok opouští, se skrývá.

Tím se dosáhne toho, že bílé písmo mimo blok není vidět (je skryto), zatímco reverzní růžové ano. Vrstvy se následně vytvářejí pomocí nastavení Z indexu, který definuje, který element má být v popředí a který má být naopak v pozadí. Z index se také aplikuje na botu a medaili, aby měly nejvyšší Z index a aby se veškerý obsah skryl za nimi.

Kompletní návod na vytvoření tohoto efektu nemá smysl popisovat krok za krokem s pomocí obrázků, protože je níže přiložené video názorně ukazuje.

Animace písma se změnou barvy pomocí Elementoru – video

Návod, jak se provádí animace písma se změnou barvy v závislosti na pozadí je vidět v tomto cca 5 minutovém videu.

Více článků o Elementoru

Celá kategorie je zde

Web je vytvářen s pečlivostí k obsaženým informacím. Snažím se poskytovat kvalitní a užitečný obsah, který ostatním pomáhá, nebo je inspiruje. Pokud jste spokojeni s mou prací a chtěli byste mě podpořit, můžete to udělat prostřednictvím jednoduchých možností.

Byl pro Vás tento článek užitečný?

Klikni na počet hvězd pro hlasování.

Průměrné hodnocení. 0 / 5. Počet hlasování: 0

Zatím nehodnoceno! Buďte první

Jak užitečný vidíte tento článek.

Sledujte mě na sociálních médiích.

Je mi líto, že pro Vás nebyl článek užitečný.

Jak mohu vylepšit článek?

Řekněte mi, jak jej mohu zlepšit.

newsletter

Odebírejte Newsletter

Buďte v obraze! Připojte se k odběru newsletteru a buďte první, kdo získá nejnovější informace přímo do vaší e-mailové schránky. Sledujte aktuality, exkluzivní události a inspirativní obsah, přímo na Vašem e-mailu.  

Odebírat
Upozornit na
guest
0 Komentáře/ů
Nejstarší
Nejnovější Nejvíce hlasováno
Vložené zpětné vazby.
Zobrazit všechny komentáře.

Pokud mi chcete napsat rychlou zprávu, využije, prosím, níže uvedený
kontaktní formulář. Děkuji.

Další Kontaktní údaje