La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

JQuery Utilizzo, animazioni, plugin e parallax scrolling Federico Ranieri 2014.

Presentazioni simili


Presentazione sul tema: "JQuery Utilizzo, animazioni, plugin e parallax scrolling Federico Ranieri 2014."— Transcript della presentazione:

1 JQuery Utilizzo, animazioni, plugin e parallax scrolling Federico Ranieri 2014

2 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.

3 Implementazione nel codice html script– è necessario scrivere tra i tag head il tag script per implementare il file js esterno. $(document).ready(function(){ alert(‘ciao mondo!’); }); 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”)

4 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 che al click del mouse si muove a destra di 200px. $(document).ready(function (){ $("#quadrato").click(function (){ $(this).animate({ left: "200px" },2000); }); #quadrato{ width: 200px; height: 200px; background-color: green; position: fixed; } testo Analizzo il codice: tra i tag ho creato un tag blocco 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.

5 Vertical Scrolling Design – una tecnica molto usata è quella di elliminare molto pagina secondarie e concentrate tutto il contenuto nella index.html tramite 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 Seminario Jquery $(document).ready(function (){ $("#scroll").click(function (){ $('body,html').animate({ scrollTop: 2000 }, 3000); }); 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; } CLICCAMI Pagina2 Pagina3 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 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.

6 Parallax.js 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. Parallax.js | Simple Example var scene = document.getElementById('scene'); var parallax = new Parallax(scene); Anteprima

7 Best JQuery Plugin 2013 https://mixitup.kunkalabs.com/

8 Seminario JQuery Realizzato da Federico Ranieri 2014 Trova altri esempi su federicostudio.altervista.org (click per andare direttamente al sito)


Scaricare ppt "JQuery Utilizzo, animazioni, plugin e parallax scrolling Federico Ranieri 2014."

Presentazioni simili


Annunci Google