Mostrare elementi in sequenza con jQuery e CSS3

Un paradosso, ma quando elementi(per esempio immagini ) escono in ritardo uno dopo l'altro si accelera il processo di percezione: il visitatore comprende meglio il contenuto del nostro articolo.

 

Vediamo come mostrare vari elementi in sequenza  con jQuery

Vediamo subito di che cosa sto parlando , se le immagini sono gai visbili ricarica la pagina!

Tuwanek Sunshine Coast, British Columbia Hornby Island shoreline, British Columbia Mt Baker, Washington Nelson Bridge, Vancouver Golden skies, Victoria First beach, Vancouver

Prima di tutto dovremo creare una carcasa per la nostra galeria

In questa lezione esamineremo due opzioni una basati su CSS e altra su jQuery. In entrambe le versioni si utilizza la stessa struttura di markup:

<div id=galeria>
    <img src=img/tuwanek-sunshine-coast-bc.jpg alt="Tuwanek Sunshine Coast, British Columbia">
    <img src=img/hornby-island-shoreline.jpg alt="Hornby Island shoreline, British Columbia">
    <img src=img/mt-baker-washington.jpg alt="Mt Baker, Washington">
    <img src=img/nelson-bridge.jpg alt="Nelson Bridge, Vancouver">
    <img src=img/golden-skies-victoria.jpg alt="Golden skies, Victoria">
    <img src=img/first-beach-vancouver.jpg alt="First beach, Vancouver">
</div>

Le principali proprietà di CSS sono molto semplici e uguali per entrambi i casi:

#galeria{
    font-size:0;
}
#galeria img{
    width:33.33%;/*imostiamo larghezza del elemento*/
    opacity:0;/*nascondiamo immagini al inizio*/
}

(Usiamo il font-size: 0 per la perfetta fusione di immagini all'interno di un div).

 

Realizzare sequenza su CSS3

Visualizzazione sequenziale può essere creata usando animazione stop-motion ( techica del paso dopo paso nella animazione  ) e la proprietà di CSS animation-delay. In realta  nostri elementi nella animazione vengono richiamati con crescente ritardo per ogni elemento (nel nostro caso immagini) sucesivo. ( Nel codice sotto sono stati rimossi i prefissi browser per avere piu chiarezza).

@keyframes galeria {  100% { opacity: 1; } }
 
#galeria img { animation: galeria .5s forwards; } 
#galeria img:nth-child(1) { animation-delay: .5s; }
#galeria img:nth-child(2) { animation-delay: 1s; }
#galeria img:nth-child(3) { animation-delay: 1.5s; }
…

Questa soluzione funziona, ma presenta diversi inconvenienti.

Svantaggi nell'utilizzo i CSS

L'approccio di puro CSS rende più difficile cambiare la tempistica dell'animazione: alterando il valore di ritardo per un elemento all'inizio vi costringerà a riscrivere codice di stile per gli elementi successivi. Il CSS3, inoltre, rende il nosto codice ingombrante: le altre immagini che si aggiungono, richiedono più righe di codice da scrivere.

Non vi è alcun modo per determinare il tasso di crescita per il ritardo nel CSS anche perche  tutto dipenderà molto dal processo di caricamento di oggetti: larghezza di banda, l'ordine di avvio e la velocità di connessione, che possono può rovinare in modo significativo risultato finale.

Al momento  migliori risultati posiamo  raggiungere con l'uso di Javascript (useremo la sua libreria piu utilizata jQuery).

Realizzare sequenza basata su jQuery

vediamo come sostituire codice  CSS3 con un semplice script:

$(function() {
      $('#galeria img').each(function(i) {
    $(this).delay((i++) * 500).fadeTo(1000, 1); })
});

JavaScript fa apparire le immagini in un div e impostiamo la viulazisazione completta in 1 secondo (1000 millisecondi). Il ritardo di visualizzazione per ogni elemento è determinato dall'ordine del eleemnto nel div moltiplicato per una costante 500 millisecondi. Il primo elemento vine visualizzato con un ritardo di mezzo secondo (1 × 500 millisecondi), il secondo in un ritardo di 1 secondo (500 millisecondi 2 ×) e così via

Creare portafoglio animato

Questa soluzione o trucco di generare visualizzazione di immagini in sequenza ad ogni caricamento della pagina puo essere utile in varie situazioni Si può preparare per esempio una breve presentazione dei vostri lavori. E 'importante scegliere la sequenza giusta perche se il ritardo ara troppo lento allora può causare irritazione del nostro visitatore.

 

Letto 3411 volte