Animazione

In Sitely, puoi dare vita agli elementi del tuo sito web con l'animazione. Ci sono due tipi principali di animazione: uno avviene quando un elemento appare sullo schermo e l'altro è legato all'azione di scorrimento della pagina.

Animazione Singola

L'animazione singola crea un effetto quando un elemento appare per la prima volta. Hai molte opzioni tra cui scegliere, ma non le vedrai nell'area di lavoro di Sitely; dovrai visualizzare nell'anteprima del tuo sito per controllarle.

Quando un elemento diventa visibile, l'animazione si attiva. Può iniziare sia quando l'elemento appare sia dopo un po' di scorrimento. Puoi controllare quanto lontano deve scorrere l'elemento prima che inizi l'animazione. Se l'elemento è già visibile quando la pagina si carica, l'animazione inizia subito.

Puoi anche controllare il ritardo e la durata dell'animazione. Questo è utile se stai animando più elementi e vuoi che inizino in momenti diversi per un effetto più fluido.

Nell'esempio qui riportato, il testo è stato impostato per animarsi dopo aver raggiunto una posizione fissa nella finestra di visualizzazione del browser. È stato impostato per ripetere l'animazione 5 volte prima di fermarsi. Se non si vede il testo animato, scorrere la pagina fino all'inizio o aumentare l'altezza della finestra del browser: è stato impostato per iniziare a 600 px dal fondo della finestra del browser.

Questo è un esempio di testo animato che utilizza l'effetto Zoom, abbinato all'opzione “Sposta poco in alto”.

Un avviso: troppa animazione può a volte infastidire i visitatori, specialmente se sembra pubblicità. Quindi, usala con saggezza ed evita di esagerare, soprattutto con animazioni ripetitive. Inoltre, le animazioni nella parte superiore della pagina potrebbero confondere, facendo pensare che la pagina si stia caricando lentamente.

Applicare una animazione singola

Tutte le animazioni si applicano attraverso il pannello di stile sulla destra dello schermo, sotto la sezione denominata "Effetti di scorrimento". Lì troverai l'opzione per applicare animazioni singole. Selezionando quell'opzione ti verranno presentati gli effetti che possono essere applicati. Basta selezionare un effetto a tua scelta per applicarlo all'elemento selezionato nell'area di lavoro. Se scegli l'opzione "Altro", si aprirà un elenco secondario di animazioni, ampliando ulteriormente le possibilità.

Quando selezioni un'animazione, si presenteranno altre opzioni che ti permetteranno di scegliere diversi tipi di movimenti per la tua animazione, la durata dell'animazione, un tempo di ritardo prima che inizi l'animazione e un numero di ripetizioni prima che l'animazione si fermi. Un'ultima opzione ti consente di impostare la distanza dal fondo della finestra del browser che l'elemento deve raggiungere prima che inizi l'animazione. Chiaramente, se non imposti una distanza, l'intera animazione potrebbe iniziare e finire prima che si veda realmente sulla pagina.

Animare allo scorrimento

Le animazioni legate allo scorrimento danno al tuo sito web una sensazione dinamica. Puoi giocare con diversi effetti come scorrimento verticale e orizzontale, scalatura, rotazione, sfocatura e cambiamento di opacità.

Ogni effetto ha le sue impostazioni, come la velocità per gli effetti di scorrimento e il grado di rotazione. Puoi essere davvero creativo combinando effetti e far risaltare davvero il tuo sito web!

Regoli le impostazioni facendo clic sull'icona delle impostazioni a destra del nome dell'effetto. Si presenta così:

Prima di entrare nelle impostazioni, dovremmo prima discutere brevemente come funzionano le animazioni di scorrimento.

Scorrere una pagina web significa essenzialmente spostare il contenuto della pagina dal fondo della finestra del browser verso l'alto. Pertanto, qualsiasi animazione di scorrimento può iniziare solo quando l'elemento animato appare nella parte inferiore della finestra del browser e può finire solo quando raggiunge la parte superiore. Chiaramente, non vogliamo sempre che un'animazione inizi proprio in fondo alla finestra del browser, e non vogliamo sempre aspettare che si fermi quando raggiunge la parte superiore della finestra. Per questo motivo, Sitely ti consente di impostare un intervallo in cui avviene l'azione - per chiarezza, ci riferiremo a quell'intervallo come "finestra di azione". Questa è essenzialmente una parte della finestra del browser che designi come l'area dello schermo in cui si muovono le cose.

Sitely rende molto facile impostare questa "finestra di azione" attraverso una semplice interfaccia. Quando fai clic sull'icona delle impostazioni di un effetto, vedrai un popup dove effettuare le impostazioni. Sul lato sinistro del popup c'è una rappresentazione grafica di uno schermo di un dispositivo. All'interno di quello schermo ci sono due marcatori. Puoi spostare questi marcatori su e giù per creare la tua "finestra di azione". Nell'esempio qui sotto, i marcatori sono stati impostati al 25% (alto) e al 75% (basso). Lo spazio bianco in mezzo è la nostra "finestra di azione" dove si verifica l'effetto.

A destra del popup ci sono impostazioni specifiche per l'effetto. Ancora una volta, in questo esempio di un'animazione di movimento verticale, abbiamo impostato una velocità di 2 volte la velocità di scorrimento e abbiamo detto all'animazione di iniziare quando la parte superiore dell'elemento animato è all'interno della "finestra di azione". Il risultato finale? Quando la parte inferiore dell'elemento attraversa il marcatore del 75%, l'elemento inizierà il suo movimento verticale verso l'alto fino a raggiungere il marcatore del 25%. A quel punto, smette di muoversi. Questo presume che il punto di partenza del viaggio dell'elemento sia la posizione in cui è stato posizionato nell'area di lavoro. Ma, e se volessimo che iniziasse il suo movimento prima e terminasse il suo movimento nella sua posizione nell'area di lavoro? Per fare questo, faremo clic sul pulsante "Scambia" per invertire l'effetto. Essenzialmente, l'elemento inizierà sotto la sua posizione attuale nell'area di lavoro e si muoverà verso l'alto fino alla sua posizione nell'area di lavoro. Il punto in cui l'elemento inizia il suo viaggio è determinato dal marcatore della zona inferiore. Una rappresentazione animata dell'effetto è mostrata nell'interfaccia grafica in modo da poter visualizzare in anteprima come apparirà l'effetto.

Colori che cambiano

In questo esempio, possiamo vedere l'effetto “Movimento verticale” applicato a quattro riquadri. Man mano che la pagina scorre, i riquadri si spostano verso l'alto, rivelando il testo nascosto sotto di essi. Ogni riquadro si muove a una distanza leggermente diversa, perché sono stati impostati per muoversi a velocità diverse: essenzialmente, maggiore è la velocità, prima l'elemento raggiunge la sua destinazione alla fine dell'animazione.

One

Step

At a

Time

Variazioni delle Impostazioni

Ogni effetto di animazione avrà impostazioni leggermente diverse, ma seguono tutte gli stessi principi generali. Imposta una "finestra di azione" e poi applica le impostazioni per ottenere l'effetto desiderato. Ad esempio, con le animazioni orizzontali, puoi impostare la direzione del movimento. In questo esempio qui sotto, abbiamo impostato un elemento per muoversi dalla sua posizione nell'area di lavoro verso destra dello schermo. La riga inferiore dei pulsanti di direzione indica all'animazione la posizione di partenza dell'elemento, mentre i pulsanti di direzione superiori mostrano la direzione del movimento.

La cosa da notare riguardo all'animazione orizzontale è che il percorso di viaggio è illimitato - essenzialmente, l'elemento si muoverà fuori dal bordo dello schermo durante il tempo necessario per scorrere attraverso la "finestra di azione". Quindi, più grande è la "finestra di azione", più a lungo ci vorrà per completare l'animazione. Se desideri limitare il movimento orizzontale in modo che l'elemento non voli completamente fuori dallo schermo, puoi impostare entrambi i set di pulsanti di direzione su "Area di Lavoro". Questo ti permetterà di impostare una velocità di scorrimento, che sostanzialmente limita il movimento. Questo porta l'animazione a iniziare quando l'elemento entra nella "finestra di azione" e a fermarsi quando esce dalla finestra. Se la velocità di scorrimento è impostata abbastanza bassa (tipicamente sotto 1x), l'animazione si fermerà prima di avere il tempo di volare fuori dal bordo dello schermo.

Considerazioni Finali

Le animazioni possono essere una grande risorsa per il tuo sito web se usate in modo ponderato e con uno scopo. Ci sono anche ampie variazioni su come possono essere impostate per ottenere effetti particolari - è tutto una questione di provare tutto e capire cosa sta succedendo. In molti aspetti, è un po' come imparare a volare un elicottero: spingi il joystick in una certa direzione e guarda cosa fa l'elicottero. Se vuoi che lo faccia di nuovo - ecco dove va il joystick. Quindi, gioca con le opzioni di animazione e inizia a capire come funziona ciascuna opzione. Con un po' di pratica, diventerai un maestro dell'animazione. Potresti non raggiungere le vette vertiginose di Walt Disney, ma sarai in grado di applicare effetti straordinari alle tue pagine web di Sitely.

Gestione delle pagine

Mappe