Come utilizzare l'animazione sullo scorrimento nel web design

L'animazione su scorrimento è l'effetto base del caricamento e dello scorrimento delle pagine web. Puoi aggiungerlo selezionando un elemento e poi andando al pannello delle proprietà. Fare clic sul collegamento Su scorrimento e selezionare la casella di controllo Animazione. Seleziona un Preset e personalizza l'effetto On Scroll, se necessario. Anteprima per vedere l'animazione sull'effetto di scorrimento.
Animazione a scorrimento

Sfoglia per categorie di funzionalità

Animazione in loop

Oggi, molti siti Web hanno elementi animati utilizzati per attirare l'attenzione aumentando le visite, migliorando il marchio e aggiungendo l'unicità dei siti Web. Nicepage consente a web designer, professionisti e principianti di creare blocchi ricchi di animazioni senza codifica. Puoi abilitare la proprietà Loop Animation nel pannello delle proprietà per aggiungere animazioni e interazioni al tuo sito web, portando la potenza di JavaScript e CSS nell'editor visivo del sito web.

Personalizzazione dell'animazione

Supponiamo che gli effetti di animazione standard siano troppo piccoli per l'idea del tuo sito Web e che sia necessario combinare diversi effetti di animazione per ottenere il risultato desiderato. Puoi controllare completamente le proprietà disponibili per i predefiniti di animazione personalizzabili. E scegli solo i predefiniti di animazione predefiniti dalla libreria con una messa a punto minima. Puoi andare al pannello delle proprietà e personalizzare tutte le proprietà degli effetti Dissolvenza, Sposta, Zoom, Ruota, Ruota e Spirale.

Preimpostazioni di animazione

È possibile utilizzare le preimpostazioni Animazione su scorrimento. E ce ne sono due tipi: preimpostazioni di animazione personalizzabili, le cui proprietà possono essere completamente modificate, le preimpostazioni di animazione predefinite, che puoi scegliere solo dalla libreria e avere una messa a punto minima.

Effetto dissolvenza animazione

L'effetto Dissolvenza è una transizione stilistica in cui un elemento, come un'immagine, un testo o uno sfondo, scompare gradualmente e riappare sulla pagina web. È possibile impostare l'effetto dissolvenza selezionando un elemento e scegliendo l'animazione su scorrimento nel pannello delle proprietà.

Effetto animazione diapositiva

Aggiungi l'effetto se desideri che il tuo elemento si sposti gradualmente da un punto all'altro in una direzione particolare durante il caricamento o lo scorrimento della pagina. Specificare l'effetto diapositiva aggiungendo, scegliendo un elemento e quindi facendo clic sul predefinito diapositiva nella sezione Animazione su scorrimento del pannello delle proprietà.

Effetto animazione zoom

L'effetto Zoom è la transizione dell'aspetto graduale mentre si cambia la dimensione di un elemento. Consente di chiudere un elemento durante il caricamento o lo scorrimento di una pagina web.

Capovolgi l'effetto di animazione

Applica l'effetto Capovolgi per implementare la semirotazione di un elemento, per cui puoi vedere sia il lato anteriore che quello posteriore dell'elemento corrente. Puoi scegliere il bastoncino ribaltabile dall'asse X o dall'asse Y. È possibile selezionare un elemento e quindi il Flip Preset per l'animazione allo scorrimento nel pannello delle proprietà.

Effetto animazione rimbalzo

Usa l'effetto Animazione rimbalzo per far muovere l'elemento verso il basso, verso l'alto e verso il basso di nuovo rapidamente durante lo scorrimento della pagina. È possibile abilitare l'animazione di rimbalzo a scorrimento facendo clic sul corrispondente predefinito nella sezione Animazione a scorrimento del pannello delle proprietà.

Ruota l'effetto di animazione

L'effetto Ruota definisce una trasformazione che ruota un elemento attorno a un punto fisso della pagina senza la deformazione. Questo effetto è disponibile anche come predefinito, che puoi trovare nella sezione Animazione su scorrimento del pannello delle proprietà.

Effetto animazione scatola

The Box, o Jack In The Box, crea un effetto di transizione che imita un popolare movimento del giocattolo scherzoso. Inizia con la dissolvenza centrale e continua con l'agitazione da un lato all'altro.

Effetto animazione flash

Anche l'animazione flash, associata all'ammiccamento, è popolare per attirare l'attenzione dei visitatori. Appare come una serie di transizioni di dissolvenza in entrata e in uscita con l'accento sullo stato opaco dell'oggetto o del testo animato.

Effetto animazione cerniera

Con l'Effetto Cerniera, un Elemento si capovolge o fa capovolgere con un movimento improvviso e rapido fermandosi nel punto di un cardine immaginabile. Questa transizione naturale può aggiungere sorpresa all'interazione nel tuo web design.