Howtoweb.it

Come realizzare slide animate con jquery

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.

Tag: css, html, jquery