Come utilizzare l'animazione al passaggio del mouse nel web design
Colore al passaggio del mouse
L'impostazione del colore dell'elemento al passaggio del mouse aiuta a focalizzare l'attenzione dei visitatori su un elemento e fornisce un'impressione e un concetto dell'idea desiderata sul suo significato. Puoi cambiare il colore dell'elemento al passaggio del mouse. Per questo, seleziona un elemento e nel pannello delle proprietà, vai alla sezione Animazione attiva, fai clic sul collegamento al passaggio del mouse e quindi sulla casella di controllo al passaggio del mouse. Modifica il Colore da applicare al passaggio del mouse.
Confine al passaggio del mouse
L'Element Border è importante anche per migliorare l'interazione di Elements e attirare l'attenzione dei visitatori. È possibile modificare il bordo al passaggio del mouse per elementi come icona, immagine, forma, gruppo, griglia, ecc. Nella sezione al passaggio del mouse del pannello delle proprietà, selezionare la casella di controllo al passaggio del mouse. Modifica il bordo da mostrare mentre passi il mouse su un elemento.
Raggio al passaggio del mouse
Per immagini e forme, gruppi e celle griglia, puoi modificare il raggio al passaggio del mouse. Gli elementi diventano attraenti con questa proprietà, sollecitando l'azione (pulsanti Acquista ora, Leggi di più, ecc.) e rendendo unico il tuo design. Nella sezione Hover del pannello delle proprietà, abilita la modalità Hover. Trascina il cursore Raggio per impostarne il valore Al passaggio del mouse.
Ombra al passaggio del mouse
Puoi modificare la proprietà Ombra al passaggio del mouse per testi e altri elementi. Per impostare l'Ombra al passaggio del mouse, aggiungi o seleziona un elemento. Quindi, fare clic sul collegamento Hover del pannello delle proprietà, selezionare la casella di controllo Hover, modificare l'ombra da applicare al passaggio del mouse. Puoi iniziare con uno dei preset delle ombre e personalizzarlo se necessario.
Trasparenza al passaggio del mouse
Puoi modificare la trasparenza dell'elemento al passaggio del mouse per aggiungere interazione e attrattiva al design del sito web. Nel pannello delle proprietà, fare clic sul collegamento al passaggio del mouse e selezionare la casella di controllo al passaggio del mouse. Imposta la trasparenza da applicare al passaggio del mouse. Fare clic in un punto qualsiasi del blocco per deselezionare l'elemento. Passa il mouse sull'elemento per testare la modifica della trasparenza.
Passa al passaggio del mouse
Gli effetti di animazione al passaggio del mouse utilizzati sui siti Web moderni sono diventati più sofisticati. Uno degli esempi di effetti è l'Element Move on Hover. Puoi aggiungere lo spostamento di un elemento al passaggio del mouse. Aggiungi o seleziona un elemento e vai al pannello delle proprietà. Fare clic sul collegamento al passaggio del mouse e quindi selezionare la casella di controllo al passaggio del mouse. Imposta i valori per la proprietà Sposta X, Y.
Rotazione al passaggio del mouse
La rotazione al passaggio del mouse è il prossimo effetto importante e complesso. Per ruotare un elemento al passaggio del mouse, aggiungi o seleziona un elemento e vai al pannello delle proprietà. Vai a e fai clic sul collegamento al passaggio del mouse nella sezione Animazione attiva, quindi seleziona la casella di controllo al passaggio del mouse. Utilizzare il dispositivo di scorrimento per impostare l'angolo di rotazione o immettere il valore nel campo di input. I valori supportati per l'angolo di rotazione vanno da 0 a 359.
Scala al passaggio del mouse
Il ridimensionamento può sembrare la reazione più naturale sul cursore. Pertanto, può essere molto popolare. Puoi facilmente aggiungere la bilancia al passaggio del mouse al tuo sito web. Per questo, aggiungi o seleziona un elemento e poi vai al pannello delle proprietà. Fare clic sul collegamento al passaggio del mouse della sezione Animazione attiva e selezionare la casella di controllo al passaggio del mouse. Scorri verso il basso fino alle proprietà Scala, Ruota e Sposta. La dimensione effettiva è pari a 100.
Durata al passaggio del mouse
Puoi gestire l'animazione al passaggio del mouse impostando la sua Durata. Imposta la durata per l'animazione al passaggio del mouse, aggiungi o seleziona un elemento e vai al pannello delle proprietà. Seleziona il collegamento al passaggio del mouse della sezione Animazione su e scegli la casella di controllo al passaggio del mouse. I valori supportati per lo Slider vanno da 10 a 200 e puoi inserire un numero più grande in questo campo, se necessario.
Colore di sfondo in sfumatura al passaggio del mouse
Aggiungendo l'animazione al passaggio del mouse a una forma con uno sfondo, potresti voler cambiare il riempimento solido in qualcosa di attraente, come un gradiente. Per questo, seleziona una forma e vai al collegamento al passaggio del mouse del pannello delle proprietà. Fare clic sul collegamento Animazione su -> Al passaggio del mouse e selezionare la casella di controllo al passaggio del mouse. Selezionare il tipo di gradiente per lo sfondo e impostare il gradiente.
Immagine di sfondo all'immagine al passaggio del mouse
Puoi anche cambiare il riempimento in immagini e persino cambiare un'immagine di sfondo in un'altra mentre sei in bilico, il che può intrattenere molto i tuoi visitatori. Seleziona una forma e aggiungi un'immagine per lo sfondo. Vai alla sezione Animation On del Property Panel e clicca su Hover. Abilita l'effetto Al passaggio del mouse e seleziona l'immagine come Tipo di sfondo. Scegli l'immagine al passaggio del mouse. Test.