Jak používat animaci Hover ve webovém designu
Barva Při Vznášení
Nastavení barvy prvku na přechod pomáhá zaměřit pozornost návštěvníků na prvek a vytváří dojem a představu o požadované představě o jeho významu. Při najetí myší můžete změnit barvu prvku. Chcete-li to provést, vyberte prvek a na panelu vlastností přejděte do části Animace na, klikněte na odkaz Umístění ukazatele myši a poté na zaškrtávací políčko Umístění ukazatele myši. Upravte barvu, která se má použít při najetí myší.
Hranice Na Hover
Hranice prvku je také důležitá pro zlepšení interakce prvků a přitažení pozornosti návštěvníků. Ohraničení přechodu můžete změnit u takových prvků, jako je ikona, obrázek, tvar, skupina, mřížka atd. V části Umístění ukazatele na panelu vlastností zaškrtněte políčko Přejetí. Upravte ohraničení, které se zobrazí při najetí na prvek.
Poloměr při vznášení
U obrázků a tvarů, skupin a buněk mřížky můžete změnit poloměr při najetí myší. Prvky se díky této vlastnosti stanou atraktivními, vybízejí k akci (tlačítka Koupit nyní, Číst více atd.) a udělají váš návrh jedinečným. V části Hover panelu vlastností povolte režim Hover. Přetažením posuvníku Poloměr nastavte jeho hodnotu Při umístění kurzoru.
Stín Při Vznášení
Vlastnost Shadow můžete upravit při umístění kurzoru pro texty a další prvky. Chcete-li nastavit stín při najetí myší, přidejte nebo vyberte prvek. Dále klikněte na odkaz Hover panelu vlastností, zaškrtněte políčko Hover, upravte stín, který se má použít při vznášení. Můžete začít s jednou z předvoleb stínů a v případě potřeby ji upravit.
Průhlednost Na Hover
Můžete upravit Průhlednost prvku při najetí myší a přidat do designu webu interakci a atraktivitu. Na panelu vlastností klikněte na odkaz Umístění ukazatele myši a zaškrtněte políčko Umístění ukazatele myši. Nastavte průhlednost, která se má použít při najetí myší. Kliknutím někam do bloku zrušíte výběr prvku. Umístěním kurzoru na prvek otestujte změnu průhlednosti.
Move On Hover
Efekty animace Hover používané na moderních webových stránkách se staly sofistikovanějšími. Jedním z příkladů efektů je Element Move on Hover. Můžete přidat pohyb prvku při umístění kurzoru myši. Přidejte nebo vyberte prvek a přejděte na panel vlastností. Klikněte na odkaz Hover a poté zaškrtněte políčko Hover. Nastavte hodnoty pro vlastnost Move X, Y.
Rotace Při Vznášení
Dalším důležitým a komplexním efektem je rotace při vznášení. Chcete-li otočit prvek při najetí myší, přidejte nebo vyberte prvek a přejděte na panel vlastností. Přejděte na odkaz Umístit kurzor v části Animace zapnuta a klikněte na něj a poté zaškrtněte políčko Umístit kurzor. Pomocí posuvníku nastavte úhel otočení nebo zadejte hodnotu do vstupního pole. Podporované hodnoty pro úhel otočení jsou od 0 do 359.
Měřítko Při Vznášení
Změna měřítka může vypadat jako nejpřirozenější reakce na kurzor. Proto může být velmi populární. Scale On Hover můžete snadno přidat na svůj web. Za tímto účelem přidejte nebo vyberte prvek a poté přejděte na panel vlastností. Klikněte na odkaz Hover v části Animation On a zaškrtněte políčko Hover. Přejděte dolů na vlastnosti Měřítko, Otočit a Přesunout. Skutečná velikost je rovna 100.
Doba přechodu
Animaci při najetí můžete spravovat nastavením její doby trvání. Nastavte dobu trvání animace při najetí myší, přidejte nebo vyberte prvek a přejděte na panel vlastností. Vyberte odkaz Přejetí ukazatelem v části Animace při a zaškrtněte políčko Přejetí. Podporované hodnoty pro posuvník jsou od 10 do 200 a v případě potřeby můžete do tohoto pole zadat větší číslo.
Barva Pozadí Do Přechodu Při Vznášení
Když přidáte animaci přechodu do tvaru s pozadím, možná budete chtít změnit plnou výplň na něco atraktivního, jako je přechod. Chcete-li to provést, vyberte tvar a přejděte na odkaz pro umístění ukazatele panelu vlastností. Klikněte na odkaz Animace zapnuta -> Vznášení a zaškrtněte políčko Hover. Vyberte typ přechodu pro pozadí a nastavte přechod.
Obrázek Na Pozadí Na Obrázek Při Vznášení
Můžete také změnit výplň na obrázky a dokonce změnit jeden obrázek na pozadí za jiný, když se vznášíte, což může vaše návštěvníky hodně pobavit. Vyberte tvar a přidejte obrázek na pozadí. Přejděte do části Animace na panelu Vlastnosti a klikněte na Umístit kurzor. Povolte efekt přechodu a vyberte obrázek jako typ pozadí. Vyberte obrázek s přechodem. Test.