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>
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 [...]