L'immagine si forma

  

l'immagine si forma

Un altro effetto che ho trovato interessante è quello della tag-cloud con parole di diverse grandezze che lentamente appaiono in un riquadro di fianco alla frase "L'immagine si forma".

Pensi che si possa fare lo stesso effetto utilizzando HTML + javascript + CSS?



                            Vedi il risultato finale.

L'apparizione di scritte in posizioni casuali e di grandezza diversa all'interno di un riquadro è riproducibile con jquery: il riquadro contenitore sarà un DIV con al suo interno elementi SPAN contenenti le singole parole.

Il risultato finale non è ne più ne meno che una tag-cloud.L'elemento da cui andremo a "pescare" le parole sarà un DIV con id "tags" in cui le i tag saranno separati da semplici spazi.

All'apertura della pagina le parole vengono inserite in un array, ogni elemento dell'array corrisponderà quindi ad una parola.

L'array viene poi scorso e per ogni parola viene creato un elemento span con id pari all'indice dell'array, opacity pari a zero(quindi invisibili inizialmente) e size del carattere dato un numero casuale.
Le parole che si trovano nelle posizioni ad indice pari avranno proprietà float settata a destra le altre a sinistra:

float = (id % 2 == 0) ? 'right' : 'left';

Quando l'indice del tag è divisibile per 10 aggiungo 20px al size:

fontSize = (id % 10 == 0) ? fontSize + 10 : fontSize;

questo per avere alcune parole in evidenza con dimensioni sensibilmente maggiori rispetto alle altre.

Questo mi permette di avere un minimo di controllo sulla generazione della tag-cloud, infatti se voglio delle parole che tendenzialmente vadano a destra nel contenitore le dovrò mettere in una posizioni il cui indice sia multiplo di due(viceversa per le parole che vorrò far apparire a sinistra) e se ci sono parole che voglio evidenziare le dovrò porre in posizioni con indice multiplo di 10.

Per esempio, se dovessi inserire la frase evidenziata sopra nell'elemento con id "tags" (il contenitore da cui vado a pescare i tags) le parole "Quindi" in prima posizione(indice zero nell'array) e "voglio" in terza(indice 2) e la parola "parole" in quinta posizione(quindi con indice 4 nell'array) sarebbero tendenzialmente a destra mentre la parola "se" in posizione 2, "delle" in posizione 4 e "che" in sesta posizione (indice 5) non essendo i rispettivi indici divisibili per 2 risulterebbero a sinistra.
Infine l'undicesima parola "campo", la 21ma parola "posizione" essendo in posizione con indice multiplo di 10 saranno più grosse di 20px rispetto alla loro dimensione normale.

Inizialmente le parole vengono poste nel contenitore con le regole sopra esposte ma con opacity pari a zero, quindi non ancora visibili.

La visualizzazione avviene in un secondo ciclo esterno in cui viene posta la proprietà opacity pari a 1 con un tempo di apparizione anch'esso ritardato e rallentato. Il risultato non è esattamente come quello originale ma ci si avvicina parecchio, inoltre non è statico e ripetitivo ma varia anche in base alle frasi che gli passiamo e in modo randomico.

Per ottenere che tutti gli elementi non fuoriescano dal contenitore (che deve avere id "tagcloud") inseriremo la proprietà "overflow: hidden;" su quest'ultimo.

Infine l'animazione deve essere ciclica e può pescare da contenitori diversi, per questo abbiamo aggiunto:

setTimeout(function() {
  tagId++;
  $.tagcloud(20, tagId);
}, 13000);

che permette di lanciare la funzione $.tagcloud ogni 13sec. indicativamente al termine della singola animazione, passando un id che viene utilizzato dalla funzione per pescare i tag da contenitori con id diverso (che dovranno essere costituiti da un progressivo tags, tags1, tags2, tags#...).

                            Vedi il risultato finale.