<

Slideshow

Nel wordpress Gpci framework Il pattern slideshow serve a inizializzare una sequenza di immagini in ciclo, è realizzato completamente con blocchi gutenberg. Le immagini sono animate dalla funzione AnimateElements (configurata interamente con attributi e inizializzata in javascript) e possono essere visualizzate in una o più colonne. L'elemento principale è la galleria, che è il contenitore di immagini e ospita gli attributi dell'animazione , ma ho inserito anche 2 blocchi contenitori: uno esterno in cui è scritto il css e racchiude le icone avanti/indietro insieme alla galleria; un altro sotto al primo per generare e racchiudere i dots, ossia le icone su cui è possibile cliccare per visualizzare una determinata immagine.

Per i dots è sufficiente definire il modello usando il blocco icona, gli altri e saranno generati automaticamente via javascript.

I blocchi icone e il contenitore dei dots possono essere liberamente rimossi in quanto il loro ecosistema è definito nei loro blocchi.

Va precisato che non ho usato alcun id, ma ogni slideshow inserito nella pagina o nel loop è indipendente dagli altri. E' comunque possibile utilizzare id e css per differenziare ogni slideshow.

Template javascript per AnimateElements

Questo è un template pronto all'uso e facilmente modificabile per configurare lo slideshow via javascript invece degli attributi. E' importante ricordare che i parametri nella funzione javascript hanno la precedenza sugli attributi, ossia l'attributo verrà usato dalla funzione AnimateElements solo quando non è specificato il parametro javascript corrispondente oppure è settato a false.

AnimateElements( element=GetCurrentBlockFromCurrentScript(), type='group', active=1, animation='translateX', value=-100, unit='%', WaitFor=false, Autoforward={"number":1,"delay":3000,"monitor":100} );

Esempi

In questa sezione sono visibili vari esempi di pattern slideshow: sono tutti definiti tramite attributi html e inizializzati via javascript con una linea di codice:

AnimateElements();

Inoltre sono tutti dotati di autoforward quando visibili al 100% nel viewport. Come linea generale, per usare un'animazione o un'altra è sufficiente configurare 3 attributi al blocco galleria:

  • data-animate-animation
  • data-animate-value
  • data-animate-unit

Il css base è gia scritto, ma modificabile liberamente per animazioni personalizzate. L'attributo data-animate-type in questo pattern sarà sempre e comunque group. Per restringere le selezioni css ho applicato la classe slideshow-container al blocco contenitore principale.

Animazione opacity

In questa animazione solitamente l'opacità finale sarà 1 ma potrebbe essere anche un valore minore come 0.7 o 0.8. Attributi utilizzati:

  • data-animate-animation = opacity
  • data-animate-value = 1
  • data-animate-unit (non utilizzato)

Animazione translateX (verso sinistra)

In questa animazione solitamente lo scorrimento sarà verso sinistra. Attributi utilizzati:

  • data-animate-animation = translateX
  • data-animate-value = -100
  • data-animate-unit = % (è possibile anche non specificarlo)

Animazione translateX (verso destra)

Ora vediamo l'animazione precedente ma con direzione di scorrimento verso destra. Attributi utilizzati:

  • data-animate-animation = translateX
  • data-animate-value = 100
  • data-animate-unit = % (è possibile anche non specificarlo)

Proprietà css assegnata alla galleria: flex-direction:row-reverse;

Animazione translateX (2 colonne)

E' possibile anche visualizzare colonne multiple ed animarle insieme. Per fare questo è sufficiente aggiungere l'attributo data-animate-total al blocco galleria (in quanto sarà impostato dalla funzione javascript soltanto se non presente) con un valore del numero totale di immagini meno le colonne oltre la prima. In questo blocco ho 4 immagini - 1 colonna aggiuntiva = 3. Probabilmente introdurrò in futuro un attributo o qualche linea javascript per gestire questa cosa automaticamente. Voglio specificare che per ora ho testato il multi colonna soltanto nell'animazione translateX. Attributi utilizzati:

  • data-animate-animation = translateX
  • data-animate-value = -100
  • data-animate-unit = % (è possibile anche non specificarlo)
  • data-animate-total = 3

Ho aggiunto anche alla galleria la proprietà css margin:-20px per correggere l'allineamento orizzontale delle immagini e rimosso lo stack su mobile delle colonne wordpress.

Animazione translateY

In questa animazione le immagini scorrono verso l'alto. Se non specificati value e unit questa sarà l'animazione translateY default, in quanto verrà automaticamente calcolata l'altezza e usata come margine negativo superiore.

  • data-animate-animation = translateY
  • data-animate-value = -400, l'altezza della galleria (è possibile anche non specificarlo)
  • data-animate-unit = px (è possibile anche non specificarlo)

Animazione translateY (verso il basso)

In questa animazione le immagini scorrono verso il basso. Come sopra ma il margine sarà positivo e viene applicata la regola css flex-direction:column-reverse. Qui però è obbligatorio specificare value e unit.

  • data-animate-animation = translateY
  • data-animate-value = 400, l'altezza della galleria
  • data-animate-unit = px

Animazione rotateX

In questa animazione le immagini roteano sui se stesse verso il basso. Per roteare verso l'alto semplicemente impostare data-animate-value a un numero negativo (probabilmente -180)

  • data-animate-animation = rotateX
  • data-animate-value = 180
  • data-animate-unit = (non utilizzato, sarà sempre deg)

Animazione rotateY

In questa animazione le immagini roteano sui se stesse in orizzontale. Lavorare sull'attributo data-animate-value per invertire la direzione o cambiare l'effetto dell'l'animazione

  • data-animate-animation = rotateY
  • data-animate-value = -90
  • data-animate-unit = (non utilizzato, sarà sempre deg)