JQuery
Utilizzo, animazioni, plugin e parallax scrolling
Federico Ranieri 2014
Cos’è Jquery e come usarlo...
Jquery è una libreria javascript che nasce proprio
con lo scopo di velocizzare la stesura del codice.
Ed è così che è diventato il framework più utilizzato
e per questo con più plugin disponibili. La libreria
ha una dimensione inferiore a quella degli altri
framework; ha una community estesa ed è facile
da imparare.
Il motto di jQuery: “Write less, do more“ riassume i
Per iniziare ad utlizzare questo framework è necessario avere un
motivi che dovrebbero convincere ogni sviluppatore
qualsiasi editor di testo/html e il file .js della libreria. Per
ad utilizzarlo. Con poco codice si riesce a fare
scaricare il file .js bisogna andare sul sito ufficiale di jquery.
davvero tanto. La sinteticità è infatti un altro dei
punti a favore.
http://jquery.com/
Implementazione nel codice html
<html>
<head>
<script src="jquery-1.11.0.min.js"></script>
</head>
<body>
<!– codice corpo --!>
</body>
</html>
• script– è necessario scrivere tra i tag head il tag script per
implementare il file js esterno.
<script type=text/javascript>
$(document).ready(function(){
alert(‘ciao mondo!’);
});
</script>
•
script– 1° esempio vediamo come lanciare un messaggio all’avvio della pagina html. In
Jquery si utlizza il selettore $() per far riferimento ad un specifico id/class o componente.
Nello script qui sopra facciamo riferimento al documento (document) e più precisamente
tramite il metodo ready() quando il documento viene lanciato.
•
focus– utilizzando document all’interno del selettore abbiamo visto come
far riferimento ad un componente. Ma esistono altri modi come ad
esempio:
•
Per l’id : $(“#mio_id”)
•
Per le class $(“.mia_classe”)
Animazioni
In Jquery di metodi ne esistono veramente tanti per ogni
Analizzo il codice: tra i tag <body> ho creato un tag blocco <div> e gli ho attribuito l’id
tipo di evento. In questo seminario ne vedremo alcuni più
“quadrato”. Tramite l’id gli ho dato 4 stili css. Altezza,larghezza,colore e posizione nella
orientati alle animazioni dei componenti html. Come
pagina. Dopo aver dato forma al nostro quadrato, con JQuery al caricamento della
secondo esempio creiamo un quadrato tramite il tag <div>
pagina se il quadrato viene cliccato verrà spostato da sinistra a destra di 200px. Il “2000”
che al click del mouse si muove a destra di 200px.
corrisponde al tempo dell’animazione in millisecondi, in questo caso 2 secondi.
<html>
<head>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function (){
$("#quadrato").click(function (){
$(this).animate({
left: "200px"
},2000);
});
});
</script>
<style>
#quadrato{
width: 200px;
height: 200px;
background-color: green;
position: fixed;
}
</style>
</head>
<body>
<div id=‘quadrato’>testo</div>
</body>
</html>
Vertical Scrolling
•
Design – una tecnica molto usata è quella di elliminare molto pagina
secondarie e concentrate tutto il contenuto nella index.html tramite
<section> il contenuto della pagina verrà mostrato in fullscreen e per
cambiare pagina si utilizza uno scroll animate verticale. Di seguito viene
riportato il codice html-css-javascript
•
Analizzo il codice – nella parte html vengono definiti 3 section, nella parte css gli
viene data una forma/colore. La parte che si occupa dello scrolling la troviamo in
alto tra i tag <script> vediamo che quando la pagina viene caricata se si clicca sul
testo “CLICCAMI” che ha id “scroll” i componenti (body,html) tramite il metodo
animate effettueranno uno scroll di 2000px in 3 secondi.
<html>
<head>
<title>Seminario Jquery</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<script>
$(document).ready(function (){
$("#scroll").click(function (){
$('body,html').animate({ scrollTop: 2000 }, 3000);
});
});
</script>
<style>
body{
margin: 0;
padding: 0;
}
section{
width: 100%;
height: 1000px;
text-align: center;
}
#sec1{
background-color: #1abc9c;
}
#sec2{
background-color: #2ecc71;
}
#sec3{
background-color: #3498db;
}
a{
color:white;
font-size: 40px;
}
</style>
<body>
<section id="sec1"><br><br><a id="scroll">CLICCAMI</a></section>
<section id="sec2"><br><br><a>Pagina2</a></section>
<section id="sec3"><br><br><a>Pagina3</a></section>
</body>
</html>
Parallax.js
<!DOCTYPE html>
<html>
<head>
•
Parallax.js– è un plugin javascript. In poche righe di codice
<meta charset="utf-8">
permette di creare quell’effetto che viene chiamato “parallasse”
<title>Parallax.js | Simple Example</title>
ovvero un effetto ottico di movimento di più immagini
sovrapposte.
<!-- Behavioral Meta Data -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="styles/styles.css"/>
</head>
<body>
<div id="container" class="container">
<ul id="scene" class="scene">
<li class="layer" data-depth="1.00"><img
<li class="layer" data-depth="0.80"><img
<li class="layer" data-depth="0.60"><img
<li class="layer" data-depth="0.40"><img
<li class="layer" data-depth="0.20"><img
<li class="layer" data-depth="0.00"><img
</ul>
</div>
Anteprima
<!-- Scripts -->
<script src="js/parallax.js"></script>
<script>
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
</body>
</html>
src="images/layer1.png"></li>
src="images/layer2.png"></li>
src="images/layer3.png"></li>
src="images/layer4.png"></li>
src="images/layer5.png"></li>
src="images/layer6.png"></li>
Best JQuery Plugin 2013
https://mixitup.kunkalabs.com/
http://anthonyterrien.com/knob/
http://nick-jonas.github.io/windows/
http://joelb.me/scrollpath/
Seminario
JQuery
Realizzato da Federico Ranieri
2014
Trova altri esempi su federicostudio.altervista.org
Scarica
