Blog.jirivanek.eu      Digitální zápisník

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

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.

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

Kompletní návod na vytvoření tohoto efektu nemá smysl popisovat krok za krokem s pomocí obrázků. Níže přikládám názorné video, podle kterého je možné vše nastavit krok za krokem. 

Ve zkratce k postupu. Jak jsem uvedl výše, jde o dva bloky, které mají opačné barvy. Tyto bloky se vzájemně kryjí a u jednoho z nich je navíc nastaveno, že písmo, které opouští blok se skrývá. Díky tomu se docílí výsledného efektu, kdy bílé písmo mimo box není vidět (je skryto), kdežto reverzní růžové ano. Vrstvy se poté, jak je vysvětleno ve videu také, dělají pomocí nastavení Z indexu, který definuje, který element má být v popředí a který má být naopak upozaděn. Z index je tak aplikován např. i na botu a medaili. Ty mají Z index nejvyšší, aby se veškerý obsah skryl za nimi.

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

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.

Odebírat
Upozornit na
guest
0 Komentáře/ů
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