Fw

Wordpress Creative Developer

Tutorial jQuery – Comparsa Elementi HTML In Tempi Diversi

  • Tutorial Jquery
  • -

Appuntamento che torna con i tutorial jQuery, dove andiamo a vedere tecniche per migliorare l’esperienza utente durante la navigazione in un sito.

In particolare vediamo come ottenere l’effetto che puoi vedere nel sito Brandify, dove gli elementi entrano uno alla volta con un effetto di fade.

Fare entrare elementi HTML in Tempi Diversi

Per ottenere l’effetto visto nel sito, bastano pochissime righe di codice, come puoi vedere da questo breve tutorial.

Passo 1. Codice HTML

Prendiamo una lista di elementi, che vogliamo far comparire uno alla volta: è importante assegnare a ognuno un id o classe diverso.

  • Contenuto primo elemento
  • Contenuto secondo elemento
  • Contenuto terzo elemento
  • Contenuto quarto elemento

Passo 2. Applichiamo jQuery

Ora basta inserire questo codice tra i tag head.

$(document).ready(function() { $('#primo-elemento').hide().delay(600).fadeIn(300); } );	
    
$(document).ready(function() { $('#secondo-elemento').hide().delay(800).fadeIn(300); } );	
    
$(document).ready(function() { $('#terzo-elemento').hide().delay(1000).fadeIn(300); } );	
    
$(document).ready(function() { $('#quarto-elemento').hide().delay(1200).fadeIn(300); } );

Analizziamo una riga di codice:

  • $(document).ready(function() : le funzioni verranno eseguite nel momento in cui la pagina verrà caricata;
  • $(‘primo-elemento’) : applico le funzioni all’elemento html con id primo-elemento
  • .hide() : nasconde l’elemento
  • .delay(500) : fa entrare l’elemento con un ritardo di 500 millisecondi
  • .fadeIn(300) : l’elemento entra con un effetto fade, in 300 millisecondi

Un effetto a mio avviso di impatto, e ottenibile con poche righe di codice 😉

24 Commenti

  1. Grazie.. Ottimo jquery fede.. lo provo! -A-

  2. Fantastico!!! Cercavo proprio questa dritta per il design del mio sitoweb!!

  3. Ciao, ho provato a implementare questa chicca…ma non funge!
    Ho creato un file html con questo codice:

    $(document).ready(function(){
    $(‘#primo-elemento’).hide().delay(1000)fadeIn(300);
    });
    $(document).ready(function(){
    $(‘#secondo-elemento’).hide().delay(2000).fadeIn(300);
    });
    $(document).ready(function(){
    $(‘#terzo-elemento’).hide().delay(3000).fadeIn(300);
    });
    $(document).ready(function(){
    $(‘#quarto-elemento’).hide().delay(4000).fadeIn(300);
    });

    Contenuto primo elemento
    Contenuto secondo elemento
    Contenuto terzo elemento
    Contenuto quarto elemento

    Ho scaricato l’ultima versione di jquery, e sto usando chrome (ho provato con altri browser ma stesso risultato)! Non fa niente, mi appare la lista, ma senza alcun effetto, non genera errori ne niente…

  4. Scusate, mi ha troncato i tag html;
    http://pastebin.com/gfhta7YG

  5. Risolto: manca un punto nella prima riga di codice nello script

  6. ho provato a fare il tutorial ma aggiungendo il punto comunque mi da un errore di sintassi con l’editor che utilizzo (Adobe DW)

    dopo una 50ina di file prova “index.html” non ha più fatto l’errore di sintassi ma dell’effetto nemmeno l’ombra.
    Qualche input?

    cià

  7. Ottimo tutorial!! provato e funziona alla perfezione! volevo implementarlo all’interno di wordpress, quale sintassi dovrei usare per fargli prendere in modo dinamico “id” dei vari post?? in quanto mettendo la lista manualmente con i singoli id non cè nessun problema, mentre in wp la lista la crea dinamicamente.. l’id è sempre post-##, cosa devo scrivere per fargli prendere dinamicamente i numeri dopo “post-“??

    Consigli?? Grazie

  8. se interessa a qualcuno ho trovato questa soluzione..

    $(document).ready(function()
    {$(“.primo”).each(function(i)
    {$(this).hide().delay(200*i).fadeIn(300);}) ; });

    basta variare il “200”, che regola con che ritardo compaiono i vari elementi in modo sequenziale.
    Con questa tecnica gli elementi devono avere tutti la classe “primo”

    ciauz

  9. Ciao premetto che non ho molta esperienza ma non dovrebbe esserci un richiamo alla libreria javascript di riferimento per far funzionare il tutto?? e se si quale??
    Grazie Fede

    • Ciao Luca e benvenuto nel blog 😉

      Si bisogna includere la libreria jQuery, che puoi scaricare dal sito ufficiale.

  10. Ciao Fede,
    premetto che sono neofita ma ugualmente seguendo il tutorial dovrei riuscire a far funzionare la pagina..
    invece nulla, compare l’elenco ma senza nessun effetto…
    ho scaricato l’ultima versione di jquery e inserito il richiamo nella pagina..
    Non capisco dove sbaglio..
    posto il codice se hai tempo e voglia di dare un occhiata:

    $(document).ready(function(){
    $(‘#primo-elemento’).hide().delay(1000).fadeIn(300);
    });
    $(document).ready(function(){
    $(‘#secondo-elemento’).hide().delay(2000).fadeIn(300);
    });
    $(document).ready(function(){
    $(‘#terzo-elemento’).hide().delay(3000).fadeIn(300);
    });
    $(document).ready(function(){
    $(‘#quarto-elemento’).hide().delay(4000).fadeIn(300);
    });

    Contenuto primo elemento
    Contenuto secondo elemento
    Contenuto terzo elemento
    Contenuto quarto elemento

    Vale

  11. ah.. mi ha tagliato il codice 🙁
    temo di fare qualche errore nel richiamo al jquery

  12. Ciao Fede… ottimo questo tutorial, ma mi chiedevo, in linea teorica, cosa accadrebbe se si utilizzasse un cms come wordpress. Grazie per il tuo suggerimento.

    • Ciao Paolo,

      questa tecnica la puoi utilizzare tranquillamente anche in WordPress. Come volevi applicare questa tecnica?

  13. La mia è una curiosità e riguarda i post del loop della home page

  14. Ciao Fede, so di essere indietro, ho inserito per la prima volta un loader nel mio progetto. Solo che ho un problema. Durante il load si sente l’audio del video. Io vorrei che l’audio si sentisse dopo il load. Ti lascio il link della mia bozza. E’ più facile capire dall’esempio che dalle mie parole. http://www.welovewebclub.com/test/

    Qui invece c’è il mio script che ho utilizzato. http://jsfiddle.net/pmodugno/A6zpq/
    Potreste darmi qualche suggerimento o indicarmi un tutorial? Ti ringrazio infinitamente.

  15. Ciao Fede,
    ho abbinato la tua animazione allo scroll della pagina, in questo modo:

    $(document).ready(function() {
    /* Every time the window is scrolled … */
    $(window).scroll( function(){
    /* Check the location of each desired element */
    $(‘.hideme’).each( function(i){
    var bottom_of_object = $(this).position().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();
    /* If the object is completely visible in the window, fade it it */
    if( bottom_of_window > bottom_of_object ){
    $(‘#partner1’).hide().delay(600).fadeIn(300);
    $(‘#partner2’).hide().delay(800).fadeIn(300);
    $(‘#partner3’).hide().delay(1000).fadeIn(300);
    $(‘#partner4’).hide().delay(1200).fadeIn(300);
    $(‘#partner5’).hide().delay(1400).fadeIn(300);
    }
    });
    });
    });

    Finchè gli elementi sono 4 tutto bene, ma quando aggiungo il quinto ho difficoltà a scrollare la pagina. Hai idea del perché?
    Grazie mille!

  16. ottimo !!! Grazie , Thanks

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *