Tutorial Jquery: Come Realizzare Una Navigazione Animata
Oggi vediamo un tutorial su javascript, dove imparerai a realizzare una navigazione animata nei siti web, tecnica utilizzata sempre più spesso, soprattutto per i portfolio di web designers o fotografi.
Per capire meglio quello che andremo a fare, vediamo prima qualche esempio dell’effetto che vogliamo ottenere.
Come vedi in tutti questi esempi la navigazione non avviene nel modo tradizionale, ma si “sale” o si “scende” nel sito.
Basta veramente pochissimo per ottenere questo effetto; andiamo a vedere come fare.
Passo preliminare
Scarica l’ultima versione di jquery e tra i tag head inserisci questo codice.
Passo 1 – Codice Javascript.
Sempre tra i tag head, dovrai inserire il codice javascript necessario per ottenere l’animazione.
Le 2 cose da commentare in questo codice riguardano la prima parte, dove nella 3° riga viene associata la funzione LinkAnimate() ai tag HTML a con class=”link”.
Inoltre si può modificare la velocità della navigazione, agendo sulla variabile speed, cambiando il suo valore.
Passo 2- HTML
Ora dovrai inserire il codice HTML relativo alle diverse pagine che faranno parte del sito.
Il codice HTML è molto semplice, dove in questo caso abbiamo 4 div, uno per il menu (div id=”menu”) e gli altri 3 div che riguardano le 3 “pagine”.
Passo 3 – CSS
Infine dovrai associare gli stili alle varie parti della pagina, e noi andiamo a vedere quelle più importanti, cioè quelle riguardanti il menu e i box relativi alle pagine.
#menu { margin-top:30px; position:fixed; margin-left:450px; font-size:18px;}
.box { height:700px; }
Le 2 cose da osservare sono la proprietà position:fixed per quanto riguarda il menu, dato che dovrà sempre restare fisso durante la navigazione tra le varie pagine.
Inoltre è necessario assegnare un’altezza ai div, impostata sui 700px, ma questo valore può anche variare.
Fonte: 9Lessons
libs/jquery/1.3.0/jquery.min.js“></script>
<script type=”text/javascript“>
$(document).ready(function() {
$(“a.link”).LinkAnimate()
jQuery.fn.LinkAnimate = function(settings) {
settings = jQuery.extend({
speed : 1000
}, settings);
return this.each(function(){
var boxcall =$(this);
$(boxcall).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(boxcall).attr(“href”)
var destination = $(elementClick).offset().top;
$(“html:not(:animated),body:not(:animated)“).animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
</script>
E non dimenticarti di restare aggiornato abbonandoti gratis ai feed RSS.Se non sai cosa sono, guarda questo video. Ora non sai come abbonarti? Guarda questo video
Inoltre potrai seguirmi su twitter, facebook o friendfeed!
Articoli simili che potrebbero interessarti
Ciao, mi chiamo Federico Pian e lo scopo di questo blog è condividere con te la mia passione per la grafica e il web design.
[...] | Vai ai commenti | Lascia un commento Dopo aver visto qualche mese fa come realizzare una navigazione verticale animata, oggi vediamo un tutorial per realizzarne una [...]
Ciao Federico, che bello! Ecco questo sarebbe proprio quello che cercavo ..nella mia confusione mentale.. si andrebbe al caso mio x cio che ho in mente di fare, peccato che non riesco nemmeno a scricare la versione di jquery, pensa te..come siam messi male mhmmm che tragedia sono. Meglio se mi do all ittica, oppure vado a bogoni, sai cosa sono? Le lumache, come apprendimento son lente come me …quindi. Ciao caro, grazie di tutto. Great..you are. And also.. te lo devo dire scusami, sei davvero carino sai! A too nice boy “Pure.. . ehehe Ciao vha. Chissà, forse a presto. Bacioni
Ciao e grazie per i complimenti!!
Quali difficoltà hai incontrato per scaricare jquery?