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á.
Vítězné boty za nejlepší cenu
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.
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í.
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.
