Come realizzare slide animate con jquery

jqueryslide

Succede spesso che chi desidera un sito web voglia mostrare nelle pagine qualche animazione e richiede quindi un sito totalmente in flash. L’utilizzo di questa tecnologia va valutata attentamente in quanto comporta dei pro e dei contro, prima di valutare questa scelta possiamo dunque cercare delle alternative come ad esempio jquery.

Cos’è jquery?

Jquery è una libreria javascript che ci mette a disposizione una serie di funzioni che possiamo utilizzare in maniera comoda e compatibile nelle pagine web.

Esistono molte librerie javascript ed ognuna manifesta la propria “attitudine” verso determinate operazioni, per iniziare possiamo vedere come jquery possa tornare utile per “dare movimento” alle nostre pagine.

Iniziamo creando una pagina html con il seguente codice:

<div id="contenitore">
<div id="contenuto">
<div id="primo">Lorem ipsum[...]</div>
<div id="secondo">Lorem ipsum[...]</div>
<div id="terzo">Lorem ipsum[...]</div>
</div>
</div>
<div id="menu">
<a href="#" class="primo">Primo</a>
<a href="#" class="secondo">Secondo</a>
<a href="#" class="terzo">Terzo</a>
</div>

La struttura è identica a quella utilizzata per un layout a tre colonne e le differenze appaiono più evidenti nel css.

div#contenitore{
margin:0px auto;
width:600px;
height:300px;
background-color:#ffffff;
overflow:hidden;
}

div#contenuto{
margin:0px;
width:1800px;
height:300px;
background-color:#ffffff;
float:left;
display:inline;
}

div#contenuto div#primo{
margin:0px;
width:600px;
height:300px;
background-color:#cc0000;
float:left;display:inline;
}

div#contenuto div#secondo{
margin:0px;
width:600px;
height:300px;
background-color:#ffffff;
float:left;
display:inline;
}

div#contenuto div#terzo{
margin:0px;
width:600px;
height:300px;
background-color:#cccccc;
float:left;
display:inline;
}

div#menu{
margin:0px auto;
width:600px;
background-color:#ebebeb;
}

Notiamo subito che il contenitore ha settata una proprietà overflow:hidden e la larghezza dei contenuti supera quella dell’elemento padre. Questa scelta ci serve per ottenere l’effetto slide dove al click di ogni link avremo una pagina che si muove e fa apparire la seguente.

Per animare le pagine è sufficiente inserire nella pagina un link alla libreria di jquery e qualche riga per definire le azioni desiderate.

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#menu a.primo").click(function (event) {
$("#contenuto").animate({ marginLeft: "0px"}, 500 );
event.preventDefault();
});

$("#menu a.secondo").click(function (event) {
$("#contenuto").animate({ marginLeft: "-600px"}, 500 );
event.preventDefault();
});

$("#menu a.terzo").click(function (event) {
$("#contenuto").animate({ marginLeft: "-1200px"}, 500 );
event.preventDefault();
});
});
</script>

Il codice inizia con

$(document).ready(function()

Questa funzione serve a capire quando la pagina è caricata ed è possibile eseguire lo script, per chi usa javascript è l’equivalente di onload.

$("#menu a.primo").click(function (event) {

Con questa funzione definiamo un evento con il quale far partire l’azione, al click del link con classe “primo” nel menu, javascript farà partire l’azione

$("#contenuto").animate({ marginLeft: "0px"}, 500 );

Con l’utilizzo della funzione animate, modifichiamo il margine sinistro del div contenuto facendolo muovere nella posizione corrispondente al contenuto desiderato. Avendo i tre div larghezza di 600px sarà sufficiente sottrarre 600px di margine al div con id contenuto per mostrare il seguente div.

VEDI ESEMPIO

L’ultima parte del codice ha come scopo quello di inibire il link in modo che al click non il browser non vada in un altra pagina.

event.preventDefault();

Questo ci permette di ottenere un’alternativa accessibile al sito per coloro che hanno i javascript disabilitati, al click sul link si aprirà una pagina uguale ma con il margine sinistro di contenitore settato per la visualizzazione del contenuto desiderato.

E’ inoltre possibile sfruttare animate per animare il contenuto sia in orizzontale che in verticale.

VEDI ESEMPIO CON SLIDE VERTICALI

VEDI ESEMPIO CON SLIDE ORIZZONTALI

Lo script può essere notevolmente migliorato agendo sui tag ed evitando di impostare troppe classi o id, inoltre è possibile definire un ciclo per creare un array degli elementi nella pagina e applicare l’effetto ad ogni link del menu associandolo al rispettivo div con contenuto. Prossimamente vedremo come applicare queste modifiche ed utilizzare jquery per migliorare l’esperienza dell’utente sulle nostre pagine web.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con , , . Contrassegna il permalink.

18 risposte a Come realizzare slide animate con jquery

  1. Francesco scrive:

    Davvero interessante, complimenti!

  2. aledesign.it scrive:

    Interessante..mi piacerebbe solo poter aver maggior tempo da dedicare a questo tipo di “programmazione”… bel tutorial

  3. ozzy scrive:

    ciao, complimenti per il tutorial utile e ben fatto

  4. Mauro Accornero scrive:

    Grazie a tutti, sto preparando altri tutorial su jquery che credo pubblicherò a fine della prossima settimana, per i prossimi giorni scriverò un po’ sui css,spero di finire un articolo entro lunedì che credo possa essere molto utile per tutti coloro che lavorano con i fogli di stile.

  5. Sergio scrive:

    In un sistema del genere è comodo usare delle ancore: jquery dovrebbe permetterlo di default o al limite con un plugin. In questo modo non è necessario escludere il click e la pagina funzionerà praticamente allo stesso modo sia con Javascript che senza.

    Stavamo proprio vedendo questo tipo di cose quest’ultima settimana (anche se come puoi immaginare avevo altro per la testa)

    Un’altra cosa interessante è unire lo slide orizzontale e verticale: stessa cosa che hai fatto tu, ma dopo essersi spostato da destra a sinistra su una slide, si muove verso il basso verso una porzione specifica del testo.

    Questo effetto è molto carino: l’abbiamo realizzato con un plugin, ma non dovrebbe essere per forza necessario, se riesco a recuperare i riferimenti te li invio.

    • Mauro Accornero scrive:

      L’idea delle ancore non è male, dovrebbe funzionare, il mio dubbio era sul fare un sito di una pagina sola (poco appetibile per l’indicizzazione) comunque faccio qualche prova per vedere che possibilità ci sono. Sullo spostamento giocano un grande ruolo i css, con i float li si gestisce normalmente e funziona tutto, ho fatto qualche prova con i position relative ma dava qualche problema. So che ci sono dei plugin che rendono lo stesso effetto, non dovrebbero essere troppo pesanti. Anche partendo da questo esempio basterebbe definire un rel da applicare ai link e un id ai div, trovare tutti gli elementi con queste caratteristiche e applicare l’animazione. Funzionerebbe come lightbox dove si mette un attributo al link e questo applica l’effetto agli elementi della pagina. Attendo i files che mi dicevi! :)

  6. iVicio scrive:

    Grazie molto uitle ;)

  7. ozzy scrive:

    ciao di nuovo, adesso mi è sorto un dubbio…

    ma non ci potrebbero essere penalizzazioni da parte di google causate dal fatto che stiamo “nascondendo” del testo in questo modo?

    • Mauro Accornero scrive:

      Tecnicamente no, i dati sono tanto accessibili ai robot di google quanto agli utenti che si muovono con i link con o senza javascript. Questo metodo non influenza neanche i robot come ad esempio fa nofollow che impedisce di seguire il link per tutti gli spider. A livello di indicizzazione google tollera le strutture complesse con position e z-index o con javascript nel caso google valuti che ci sia un caso di over-optimization ti avvisano e ti dicono di cambiare con qualcosa di meglio ma sinceramente non mi è mai capitato con siti animati in jquery.

    • ozzy scrive:

      Grazie Mauro per la delucidazione a riguardo

  8. stiv scrive:

    Fantastico!!!!Sono alle prime armi e sto cercando il modo di inserire questo tipo di slide su il mio blog (wordpress).Ho provato plugin ma non sono per il momento riuscito a farli funzionare a dovere, o meglio non soddisfano quello che ho in mente.Chiedo troppo su un piccolo aiuto per inserire questo tipo di side sul mio blog????Grazie comunque e complimenti

    • Mauro Accornero scrive:

      Credo che se usi wordpress un plugin sia la strada più corretta perchè ti permette di gestire meglio le opzioni, considerato che jquery è una tecnologia lato client non dovrebbe essere complesso inserire un effetto del genere nel template. Ti consiglierei di fare qualche prova con i plugin di jquery ed integrarli nel template. Prova a fare qualche ricerca su google in base all’effetto che desideri, di norma con un plugin si risparmia molto codice e il risultato è equivalente ad uno script scritto a mano.

  9. adedip scrive:

    Si l’effetto è carino e funzionale…
    però il problema di indicizzazione + che altro rimane perché in qualsiasi pagina ci si trovi..risulta sempre lo stesso indirizzo.. :S una soluzione con delle ancore potrebbe funzionare?!

  10. Mauro Accornero scrive:

    Credo di sì in realtà sarebbe opportuno creare diverse pagine e lincarle alle voci, nel caso javascript sia attivo si ottiene l’effetto e si rimane su pagina singole senza javascript si cambia pagina ed ogin pagina ha settato un margine al div per partire dal contenuto desiderato. Credo che il problema più grande per google siano i contenuti duplicati però essendo una soluzione peculiare ha dei pro e dei contro anche se limitati.

  11. Francesco scrive:

    Tutorial molto interessante, sto provando ad adattarlo a un mio sito per esercimermi con il javascript, ma purtroppo non riesco a replicare l’effetto. In poche parole i div che dovrebbero essere nascosti vengono visualizzzati sotto all’unico div che dovrebbe comparire. Qualcuno può aiutarmi a capire l’errore?

  12. Ska scrive:

    Ciao una domanda al volo, non conosco ancora bene javascript e familiari vari, vorrei che oltre alle funzioni da te gia’ inserite, le slide cambiassero automaticamente ogni tot secondi, e’ una cosa fattibile? Sai indicarmi come posso farla?
    Ciao ciao e complimenti per le guide.

    • Mauro Accornero scrive:

      Puoi utilizzare le opzioni di jquery cycle, esiste un’opzione che permette di settare il tempo di delay tra una transizione e un altra. L’alternativa è un’intervallo temporale in javascript ma considerato che esiste un’opzione nel plugin non la consiglierei. Prova a guardare questo link http://jquery.malsup.com/cycle/options.html.
      sono elencate tutte le opzioni con descrizione e dovrebbe aiutarti.

  13. Rafael scrive:

    Ottima guida, grazie mille!

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>