Hur man använder Hover Animation i webbdesign
Färg På Hover
Att ställa in elementets färg på svävaren hjälper till att fokusera besökarnas uppmärksamhet på ett element och ger ett intryck av och en uppfattning om den önskade idén om dess betydelse. Du kan ändra elementets färg när du svävar. För det, välj ett element och i egenskapspanelen, gå till avsnittet Animation On, klicka på länken Hover och sedan på kryssrutan Hover. Ändra färgen som ska appliceras vid hovring.
Gräns På Hover
Elementgränsen är också viktig för att förbättra Elements interaktion och dra besökarnas uppmärksamhet. Du kan ändra svävargränsen för sådana element som ikon, bild, form, grupp, rutnät, etc. I egenskapspanelens sektion för svävning, markera kryssrutan Hover. Ändra gränsen som ska visas när du svävar över ett element.
Radie På Hover
För bilder och former, grupper och rutnätsceller kan du ändra radien vid hovring. Elementen blir attraktiva med den här egenskapen, vilket leder till åtgärder (Köp nu, Läs mer-knappar, etc.) och gör din design unik. Aktivera svävningsläget i egenskapspanelens sektion. Dra skjutreglaget Radie för att ställa in dess värde Vid hover.
Skugga På Hover
Du kan ändra egenskapen Shadow på Hover för texter och andra element. Lägg till eller välj ett element för att ställa in skuggan på svävaren. Klicka sedan på egenskapspanelens Hover-länk, markera kryssrutan Hover, ändra skuggan som ska tillämpas på Hover. Du kan börja med en av Shadow Presets och anpassa den om det behövs.
Transparens på svävaren
Du kan modifiera Element Transparency on Hover för att lägga till interaktion och attraktivitet till webbdesign. I egenskapspanelen klickar du på länken Hover och markerar kryssrutan Hover. Ställ in vilken genomskinlighet som ska tillämpas på pekaren. Klicka någonstans i blocket för att avmarkera elementet. Håll muspekaren över elementet för att testa Transparency Change.
Flytta på Hover
Hover-animationseffekterna som används på moderna webbplatser har blivit mer sofistikerade. Ett av effektexemplen är Element Move on Hover. Du kan lägga till flytten av ett element på Hover. Lägg till eller välj ett element och gå till egenskapspanelen. Klicka på länken Hover och markera sedan kryssrutan Hover. Ställ in värdena för egenskapen Move X, Y.
Rotation På Hover
Rotation on Hover är nästa viktiga och komplexa effekt. För att rotera ett element på svävaren, lägg till eller välj ett element och gå till egenskapspanelen. Gå till och klicka på länken Hover i avsnittet Animation On, och markera sedan kryssrutan Hover. Använd skjutreglaget för att ställa in rotationsvinkeln eller ange värdet i inmatningsfältet. De värden som stöds för rotationsvinkeln är från 0 till 359.
Skala På Hover
Skalning kan se ut som den mest naturliga reaktionen på din markör. Därför kan det vara väldigt populärt. Du kan enkelt lägga till Scale On Hover på din webbplats. För det, lägg till eller välj ett element och gå sedan till egenskapspanelen. Klicka på länken Hover i avsnittet Animation On och markera kryssrutan Hover. Rulla ner till egenskaperna Skala, Rotera och Flytta. Den faktiska storleken är lika med 100.
Hover varaktighet
Du kan hantera svävningsanimering genom att ställa in dess varaktighet. Ställ in varaktighet för animering vid hover lägg till eller välj ett element och gå till egenskapspanelen. Välj sektionen Animation On-sektionens Hover-länk och välj kryssrutan Hover. De värden som stöds för skjutreglaget är från 10 till 200, och du kan ange ett större antal i det här fältet om det behövs.
Bakgrundsfärg Till Gradient På Hover
Om du lägger till svävningsanimeringen till en form med bakgrund, kanske du vill ändra den solida fyllningen till något attraktivt, som en gradient. För det, välj en form och gå till egenskapspanelens svävarlänk. Klicka på länken Animation On -> Hoover och markera kryssrutan Hoover. Välj Gradient Type för Backgroud och ställ in Gradient.
Bakgrundsbild Till Bild På Hover
Du kan också ändra fyllningen till bilder och till och med ändra en bakgrundsbild till en annan medan du svävar, vilket kan underhålla dina besökare mycket. Välj en form och lägg till en bild för bakgrunden. Gå till avsnittet Animation On i egenskapspanelen och klicka på Hover. Aktivera svävningseffekten och välj bilden som bakgrundstyp. Välj svävbilden. Testa.