La tecnologia Flash che permetteva di creare siti animati è via via sparita nel mentre che prendevano piede i tablet e gli smartphone ( in particolare quelli di Apple).
Si è queindi presentata la necessità di utilizzare altri metodi per animare gli oggetti sullo schermo. Abbiamo visto esempi di animazioni fatti con webkit, adesso vediamo una animazione fatta con Jquery.
jQuery è una libreria di funzioni (framework) Javascript, cross-browser per le applicazioni web. Tramite l'uso della libreria jQuery è possibile, con poche righe di codice, effettuare svariate operazioni, come ad esempio ottenere l'altezza di un elemento, o farlo scomparire con effetto dissolvenza.
Nel nostro progetto vogliamo far volare una mongolfiera su di una mappa e far comparire una finestra quando arriva a destinazione.
Nell’ HEAD della nostra pagina di inserimento inseriamo il codice per importare la libreria jquery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
(per maggiori informazioni jquery consiglio di guardare il mannuale nella sezione appunti),
quindi, all'interno dei tag script ( <script> </script>) inseriamo il seguente codice che è il cuore della nostra animazione:
$(document).ready(function(){
$(".btn1").click(function(){
$("#p1").animate({marginLeft:"200px",marginTop:"100px"});
$("#israele").show("slow");
$("#spagna").hide("slow");
$("#russia").hide("slow");
});
$(".btn2").click(function(){
$("#p1").animate({marginLeft:"-120px",marginTop:"70px"});
$("#israele").hide("slow")
$("#spagna").show("slow");
$("#russia").hide("slow");
});
$(".btn3").click(function(){
$("#p1").animate({marginLeft:"120px",marginTop:"-70px"});
$("#israele").hide("slow")
$("#spagna").hide("slow");
$("#russia").show("slow");
});
$(".btn4").click(function(){
$("#p1").animate({marginLeft:"0px",marginTop:"0px"});
$("#israele").hide("slow")
$("#spagna").hide("slow");
$("#russia").hide("slow");
});
});
----------Script completo-----
In questa parte di codice notiamo subito le cose che ci interessano. Se qualcuno ha (come sufferito) già guardato il codice, nota che vi sono dei div chiamati p1 (che contiene la mongolfiera) e con i nomi dei paese che voglio visitare.
#p1 è il DIV che contiene la nostra mongolfiera.
#israele, #spagna, #russia sono i DIV che rappresentano i paesi da visitare
.btn1,.btn2,.btn3,.btn4 sono i bottoni delle mie mete di viaggio.
Analizzando la procedure di .btn1 vediamo subito che vengono fatte delle azioni: prima di tutto si invoca l'azione animate sul div #P1 e si sposta a sinistra e sopra di un determinato numero di pixels rispetto alla posizione iniziale; quindi si mostra il div relativo alla nostra meta e di nascondono gli altri.
Tutto molto semplice
Per finire dobbiamo racchiudere, sempre nell' HEAD della pagina, tra i tag script ( <script> </script>) l'opzione di nascondere i div con l'azione .hide()
<script>
$(document).ready(function() {
$("#israele").hide();
$("#spagna").hide();
$("#russia").hide();
});
</script>
L'azione .hide e .show hanno dei parametri, in questo caso usiamo l'opzione "slow" che rallenta la visualizzazione.
( si può alleggerire molto il codice utilizzando $this() ma per capire il funzionamento questo script lo lasciamo lungo)
-----
Script completo
-----
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("#p1").animate({marginLeft:"200px",marginTop:"100px"});
$("#israele").show("slow");
$("#spagna").hide("slow");
$("#russia").hide("slow");
});
$(".btn2").click(function(){
$("#p1").animate({marginLeft:"-120px",marginTop:"70px"});
//window.setTimeout(location.href = "http://www.filoweb.it",5000);
$("#israele").hide("slow")
$("#spagna").show("slow");
$("#russia").hide("slow");
});
$(".btn3").click(function(){
$("#p1").animate({marginLeft:"120px",marginTop:"-70px"});
//window.setTimeout(location.href = "http://www.google.com",5000);
$("#israele").hide("slow")
$("#spagna").hide("slow");
$("#russia").show("slow");
});
$(".btn4").click(function(){
$("#p1").animate({marginLeft:"0px",marginTop:"0px"});
//window.setTimeout(location.href = "http://www.google.com",5000);
$("#israele").hide("slow")
$("#spagna").hide("slow");
$("#russia").hide("slow");
});
});
</script>
<script>
$(document).ready(function() {
$("#israele").hide();
$("#spagna").hide();
$("#russia").hide();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: #000;
}
#p1 {
z-index:5;
position:absolute;
left: 218px;
top: 168px;
}
#sfondo {
background-image:url(img/medit.jpg);
position:absolute;
margin-left:0px;
margin-top:40px;
width:800px;
height:468px;
border:#FFF 4px solid;
}
body,td,th {
color: #F00;
font-weight: bold;
}
#israele {
background:#ffffff;
color:#000000;
border:1px solid #494949;
position:absolute;
margin-top:160px;
margin-left:200px;
width:200px;
height:181px;
z-index:11;
left: 200px;
top: 160px;
opacity:0.7;
filter:alpha(opacity=70);
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#spagna {
background:#ffffff;
color:#000000;
border:1px solid #494949;
position:absolute;
margin-top:20px;
margin-left:10px;
width:200px;
height:200px;
z-index:11;
left: 10px;
top: 34px;
opacity:0.7;
filter:alpha(opacity=70);
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#russia {
background:#ffffff;
color:#000000;
border:1px solid #494949;
position:absolute;
margin-top:20px;
margin-left:210px;
width:200px;
height:137px;
z-index:11;
left: 213px;
top: 37px;
opacity:0.7;
filter:alpha(opacity=70);
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
</style>
</head>
<body>
<div id="sfondo"></div>
CHECK IN: seleziona la tua destinazione
<button class="btn1">Israele</button>
<button class="btn2">Spagna</button>
<button class="btn3">Russia</button>
<button class="btn4">Casa</button>
<p> </p>
<p id="p1" ><img src="img/mongolfiera.png" width="40" height="57"></p>
<p> </p>
<div id="israele">
Israele<br/>
Lo Stato d'Israele è uno Stato del Vicino Oriente che si affaccia sul Mar Mediterraneo nel territorio storico-geografico dell'antico Regno di Israele.<br/>
Il moderno Stato d'Israele fu proclamato da David Ben Gurion il 14 maggio 1948, alla scadenza del Mandato britannico della Palestina.
</div>
<div id="spagna"> Spagna <br/>
La Spagna (in spagnolo España), ufficialmente Regno di Spagna, è uno Stato democratico, membro dell'Unione Europea e della NATO. È organizzato sotto forma di monarchia parlamentare. Situato nell'Europa sud-occidentale, insieme con il Portogallo, Andorra e Gibilterra, forma la penisola iberica.
</div>
<div id="russia"> Russia<br/>
La Federazione Russa chiamata comunemente anche Russia, è uno Stato che si estende tra l'Europa e l'Asia. <br/>
Con una superficie di 17 075 400 chilometri quadrati la Russia è il Paese più vasto del pianeta.
</div>
</body>
</html>
