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 motivi che dovrebbero convincere ogni sviluppatore ad utilizzarlo. Con poco codice si riesce a fare davvero tanto. La sinteticità è infatti un altro dei punti a favore. Per iniziare ad utlizzare questo framework è necessario avere un qualsiasi editor di testo/html e il file .js della libreria. Per scaricare il file .js bisogna andare sul sito ufficiale di jquery. http://jquery.com/
Implementazione nel codice html 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”) <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.
Animazioni In Jquery di metodi ne esistono veramente tanti per ogni tipo di evento. In questo seminario ne vedremo alcuni più orientati alle animazioni dei componenti html. Come secondo esempio creiamo un quadrato tramite il tag <div> che al click del mouse si muove a destra di 200px. Analizzo il codice: tra i tag <body> ho creato un tag blocco <div> e gli ho attribuito l’id “quadrato”. Tramite l’id gli ho dato 4 stili css. Altezza,larghezza,colore e posizione nella pagina. Dopo aver dato forma al nostro quadrato, con JQuery al caricamento della pagina se il quadrato viene cliccato verrà spostato da sinistra a destra di 200px. Il “2000” 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 <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> 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.
Parallax.js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Parallax.js | Simple Example</title> <!-- 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 src="images/layer1.png"></li> <li class="layer" data-depth="0.80"><img src="images/layer2.png"></li> <li class="layer" data-depth="0.60"><img src="images/layer3.png"></li> <li class="layer" data-depth="0.40"><img src="images/layer4.png"></li> <li class="layer" data-depth="0.20"><img src="images/layer5.png"></li> <li class="layer" data-depth="0.00"><img src="images/layer6.png"></li> </ul> </div> <!-- Scripts --> <script src="js/parallax.js"></script> <script> var scene = document.getElementById('scene'); var parallax = new Parallax(scene); </script> </body> </html> Parallax.js– è un plugin javascript. In poche righe di codice permette di creare quell’effetto che viene chiamato “parallasse” ovvero un effetto ottico di movimento di più immagini sovrapposte. Anteprima
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 In Slide Show mode, click the arrow to enter the PowerPoint Getting Started Center. Trova altri esempi su federicostudio.altervista.org (click per andare direttamente al sito)