Come utilizzare l'animazione al passaggio del mouse nel web design
Colore al passaggio del mouse
Impostare il colore dell'elemento al passaggio del mouse aiuta a focalizzare l'attenzione dei visitatori su un elemento e dà 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. Puoi 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à, seleziona la casella di controllo al passaggio del mouse. Modifica il bordo da mostrare mentre sei in bilico su un elemento.
Raggio al passaggio del mouse
Per immagini e forme, gruppi e celle della griglia, puoi modificare il raggio al passaggio del mouse. Gli elementi diventano attraenti con questa proprietà, richiedendo un'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, fai clic sul collegamento al passaggio del mouse del pannello delle proprietà, seleziona la casella di controllo al passaggio del mouse, modifica l'ombra da applicare al passaggio del mouse. Puoi iniziare con uno degli Shadow Preset 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à, fai clic sul collegamento al passaggio del mouse e seleziona la casella di controllo al passaggio del mouse. Imposta la trasparenza da applicare al passaggio del mouse. Fare clic da qualche parte nel blocco per deselezionare l'elemento. Passa il mouse sull'elemento per testare la modifica della trasparenza.
Spostati 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 al passaggio del mouse. Puoi aggiungere la mossa 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. Impostare i valori per la proprietà Sposta X, Y.
Ruota 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 e fai clic sul collegamento Passa al passaggio del mouse nella sezione Animazione attiva, quindi seleziona la casella di controllo Passa 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 sono compresi tra 0 e 359.
Scala al passaggio del mouse
Il ridimensionamento può sembrare la reazione più naturale sul cursore. Pertanto, può essere molto popolare. Puoi facilmente aggiungere Scale On Hover 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 impostandone la Durata. Imposta la durata dell'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 maggiore in questo campo, se necessario.
Colore di sfondo a gradiente 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 al passaggio del mouse e selezionare la casella di controllo al passaggio del mouse. Seleziona il tipo di sfumatura per il backgroud e imposta 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 Animazione su del pannello delle proprietà e fai clic su Passa il mouse. Abilita l'effetto Hover e seleziona l'immagine come tipo di sfondo. Scegli l'immagine al passaggio del mouse. Test.