Temporizzare gli elementi di Revolution Slider

In questa lezione capirai come animare i singoli elementi che compongono la slide in modo da renderla viva.

L’attenzione dell’utente si sposterà man mano che gli elementi appariranno sullo schermo e in questo modo il tuo slider sarà più accattivante e invogliante alla lettura.

Per fare in modo che ogni livello abbia una vita propria dobbiamo dare uno sguardo alla sezione sottostante.

Come vedi, per ogni livello che inseriamo appare una barra che lo rappresenta nell’animazione.

Per prima cosa possiamo, in caso ci siano molti elementi da gestire, rinominare ogni singolo livello, in modo da capire subito su cosa stiamo lavorando.

I livelli sono come degli strati, il più in alto è quello che starà sotto a tutti gli altri, quindi per fare in modo che un oggetto sia in primo piano rispetto ad un altro, occorrerà spostare il livello al di sotto dei quello che vogliamo coprire.

Nel nostro esempio, l’immagine della donna è posizionata dietro rispetto al bollino dello sconto, se volessi farla apparire in primo piano, dovrei spostare il livello semplicemente trascinandolo.

Il lato destro devi immaginarlo come se fosse la pellicola di un film.

Draggando la freccia puoi controllare manualmente come si dispongono gli elementi e puoi gestirne le tempistiche in due modi, sposando direttamente gli estremi o inserendo i valori nei campi numerici.

I valori sono espressi in millisecondi e rappresentano:

• Quando partirà l’animazione,
• Quando finirà,
• Quanto deve durare, sia all’inizio che alla fine.

Se ad esempio vogliamo che il tasto ci metta di più a comparire, basterà aumentare il valore dell’animazione in entrata e la sua comaprsa sarà più lenta.

Per verificare immediatamente il risultato di quello che fai clicca sul tasto play.

Come vedi è facile modificare a a mano le sequenze di apparizione di ogni oggetto, ma se vuoi avere un’ulteriore aiuto da parte di Revolution Slider puoi anche affidarti a uno dei preset che sono già pronti.

Facciamo subito una prova, considerando che lui ordinerà i livelli automaticamente a seconda di come li hai posizionati in verticale, quindi seleziono tutti i livelli e scelgo uno dei modelli.

Schiaccio play e valuto il risultato.

Ora sta a te la scelta, puoi decidere di lavorare manualmente senza problemi, ma a meno che tu non voglia fare qualcosa di davvero personalizzato puoi tranquillamente utilizzare questi preset che sono già studiati per essere gradevoli all’aspetto.

Aggiorniamo nuovamente la pagina e come vedi il nostro slider ora è esattamente come lo desideravamo.

Ora, per completare il nostro slider, possiamo creare un’altra slide e vedere cosa succede quando ne aggiungiamo una.

Per comodità duplicheremo quella appena creata e faremo delle piccole modifiche allo sfondo al testo e all’immagine, ma tu considera che puoi crearne una diversa dall’altra e renderle anche molto complesse.

Clicchiamo quindi sul tasto duplica, cambiamo l’immagine di sfondo, eliminiamo gli elementi che non ci interessano e inseriamo un nuovo titolo e una nuova immagine.

Quando siamo soddisfatti del risultato salviamo e aggiorniamo nuovamente la pagina.

Ora il nostro slider è composto da due slide differenti che si alternano.

Quando affronterai la realizzazione del tuo slider animato, il mio consiglio è di navigare in rete e prendere spunto dagli slider dei siti che vedi in giro.

Su Themeforest ad esempio, tutte le demo dei temi premium presentano slider favolosi, utili per raccogliere qualche idea e trovare il tuo spunto personale.

Per questa lezione è tutto, ora sei davvero pronto per realizzare le tue animazioni.

Nella prossima lezione vedremo qualche altro esempio pratico per capire come sfruttare al massimo le potenzialità del plugin.