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

Vertical scroll a horizontal scroll efekt v Elementoru

Za pomocí page builderu Elementor se dají vytvářet pozoruhodné efekty. Dvojící z těchto efektů je horizontální a vertikální posun obrázku, písma nebo ve své podstatě jakéhokoliv prvku. To se hodí např. na jednostránkovém webu, kde chcete zaujmout uživatele na první pohled něčím netradičním. Uděláte tak web, který bude interaktivní a elementy v něm se mohou pohybovat, jak uznáte za vhodné. To pak ve výsledku může vypadat velmi zajímavě. Dnes bych se chtěl podívat na tyto dva základní. Teda pohyb do strany a pohyb ze shora dolů. 

Vertical scroll a horizontal scroll Efekt v Elementoru
mobil1
mobil2
Vertical scroll a horizontal scroll Efekt v Elementoru

Jak je vidět na prvním obrázku, tak zde letí letadlo v krajině. Na obrázku dvě naproti tomu zase padá meteorit na zem. Jsou to ve své podstatě dva jednoduché bloky se statickým pozadím krajiny. V prvním bloku je vložené letadlo a v tom druhém potom meteorit. Oba obrázky mají transparentní pozadí. Obrázek první má pohyb horizontální, obrázek druhý pak vertikální. Grafické zpracování, prosím, neřešte. Celé je to vytvořené rychle a pouze jako demonstrativní příklad k návodu. Video, co všechno je možné s těmito pohyby vytvořit dám pod článek. Pro účel návodu ale nemělo smysl vytvářet složité příklady, které by sice byly na pohled krásné, ale v podstatě pro  účely, které mají plnit zcela nesmyslné.

Jak nastavit pohyb

Jak jsem uvedl výše, jde o blok s pozadím, kde se hýbe pouze obrázek, případně jiný element, kterým může být prakticky cokoliv. Kupříkladu písmo, tedy text. Do bloku s pozadím tedy nejprve vložte požadovaný obrázek s transparentním pozadím. Transparentní pozadí již obrázek musí mít, nenastavuje s v Elementoru. Na vytváření takových obrázků jsou dostupné buď přímo grafické editory, nebo jsou relativně použitelné i online konvertory. Oba obrázky výše jsem konvertoval online, obvykle v nějakém náhodném editoru, který mi našel Google (vizte).

Pohyb obrázku se určuje přes kartu “Pokročílé” a dále poté přes “Pohybové efekty“. Zde zapnete funkci “Scrolling Effects” a vyberete směr pohybu.

verticall_effect_elementor

Po rozkliknutí ikony tužky dále definujete, odkud a kam má pohyb jít, odkud má začínat a jakou má mít rychlost. To vše pak ve finále ovlivňuje i umístění obrázku. Tu si tedy i případně můžete nastavit jako absolutní a s obrázkem pohnout prakticky na jakékoliv místo na stránce.

verticall_effect_elementor
verticall_effect_elementor

Jakmile dokončíte pozicování a úpravu pohybu obrázku na daném pozadí, je Vaše práce prakticky hotová a do výsledných efektů můžete začít umisťovat popisky a obsah textů. Výsledek pak může vypadat např. takto.

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