Sparkle supporta due tipi di animazione per la maggior parte degli elementi, uno tipo è attivato dall’elemento che diventa visibile tramite lo scorrimento, l’altro tipo di animazione segue il movimento di scorrimento ed è collegato ad esso.

Animazione singola

Lo scopo dell’animazione singola è di produrre un effetto di rivelazione degli elementi a cui è applicato.

Ci sono molti effetti tra cui scegliere, non si vedono nell’area di lavoro di Sparkle, li devi controllare con l’anteprima.

Quando l’elemento diventa visibile tramite lo scorrimento, l’animazione si attiva una volta che l’elemento è scorso un po’ di più, la distanza esatta è controllata dall’impostazione "Distanza fondo pagina". Se l’elemento è visibile al caricamento della pagina, l’animazione viene immediatamente attivata.

Una volta attivata, l'animazione inizia dopo il ritardo scelto, per la durata specificata. Quando si imposta l'animazione per più elementi, l'impostazione del ritardo può essere impostata su valori diversi per ciascun elemento, per distribuire le varie animazioni, rendendo l’animazione d’insieme più organica.

L’animazione e il contenuto lampeggiante sono frequentemente associati dai visitatori con la pubblicità, dovresti quindi puntare ad usarlo con parsimonia e gusto, particolarmente se usato con ripetizione. Inoltre l’animazione di elementi in cima alla pagina viene talvolta scambiato per lentezza di caricamento della pagina, quindi sarebbe meglio evitarlo. L’ Assistente SEO ti avvertirà di questo.

Anima con lo scorrimento

Gli effetti di animazione legati allo scorrimento danno al tuo sito un una sensazione unica di profondità e immersione.

Puoi aggiungere e combinare i seguenti effetti:

• Scorrimento verticale;
• Scorrimento orizzontale;
• Scala;
• Rotazione;
• Sfocatura;
• Opacità.

Ogni effetto ha un intervallo del "viewport" (finestra del browser) che controlla dove l’animazione è attiva nella pagina. L’effetto inizia quando l’elemento entra nell’intervallo e finisce quando esce (riferendosi alla posizione originale non trasformata dell’elemento). Il popup di impostazioni di ogni animazione mostra un’anteprima.

La posizione di attivazione controlla se la parte alta, a metà o in basso dell’elemento sia dove inizia l’animazione. Questo è utile principalmente per animazioni molto vicine alla posizione 0% in alto allo schermo, dove la parte alta dell’elemento sarebbe sempre all’interno dell’intervallo attivo.

Effetto di scorrimento verticale

L’effetto di scorrimento verticale è spesso chiamato l’effetto parallasse, per via di diverso strati della pagina che si muovono a velocità diverse.

Lo scorrimento verticale sposta l’elemento ad una velocità verticale diversa rispetto alla velocità di scorrimento della pagina. Il valore di velocità è un fattore di moltiplicazione, per esempio scorrendo la pagina di 100 pixel con un fattore di velocità 2 x, l’elemento di sposterà di 200 pixel. Valori di velocità positiva spostano l’elemento nella stessa direzione, valori negativi lo spostano in direzione opposta.

Un elemento normalmente inizia a muoversi dalla posizione nell’area di lavoro, ed è alla massima distanza alla fine dell’intervallo. Scambiare la direzione farà si che l’elemento inizi alla sua distanza massima e si avvicini alla posizione dell’area di lavoro non trasformata.

Effetto di scorrimento orizzontale

Simile allo scorrimento verticale, ma nella direzione orizzontale. In più l’elemento può spostarsi fuori dalla finestra del browser a sinistra o a destra.

Se una o entrambe delle due posizioni sono fuori dai margini del browser, la velocità di spostamento è determinata dalla larghezza della finestra del browser e dall’intervallo.

Nello spostare orizzontalmente tra due posizioni nell’area di lavoro, il movimento è controllato dal fattore di moltiplicazione (come per lo scorrimento verticale).

Effetto di scala

L'effetto di scala cambia la dimensione dell’elemento con lo scorrimento. Devi indicare il valore di scala per la posizione finale.

Effetto di rotazione

L'effetto di rotazione cambia l’orientazione dell’elemento con lo scorrimento. Devi indicare l’angolo di destinazione per la posizione finale, e la posizione di origine attorno a cui la rotazione avviene (di default è 50% 50%, il centro dell’elemento).

Effetto di sfocatura

Cambiare la sfocatura di un elemento durante lo scorrimento dà un effetto fuori fuoco. Si specifica il fattore di sfocatura per la posizione finale. Di default è un effetto simile alla dissolvenza (sfocato alla fine), scambiando si ha un effetto di dissolvenza in entrata, con la vista completamente a fuoco alla fine dell'intervallo.

Effetto di opacità

L’effetto di opacità cambia la trasparenza dell’elemento con lo scorrimento. Devi indicare la percentuale di opacità per la fine dell’intervallo, o scambiando la direzione, per l’inizio.