08 aprile 2009

Scrolling fluido sugli anchor usando i Mootools

Una delle funzionalità implementate dai more dei mootools-more è quella legata al modulo SmoothScroll.
I mootools infatti hanno prestato parecchia attenzione allo sviluppo delle funzionalità legata al “Fx” all'interno del proprio framework.

Gli ancoraggi all'interno delle pagine HTML sono molto importanti, permettono infatti di poter accedere in maniera istantanea a determinati contenuti sommersi della marea di informazioni contenute nella pagina.

Un altro esempio di ancoraggio è quello che permette di poter accedere al "top" della pagina senza dover forzare l'utente a dover scrollare per tutta la lunghezza della stessa. Il problema è che in maniera nativa questa funzionalità è troppo istantanea, infatti la pagina esegue un salto immediato che trasmette all'utente una sorta di risveglio immediato da quello che può essere il relax trasmesso della pagina.

Per questo in questo post si vuole suggerire un modo mediante cui eseguire uno scrolling fluido e graduale della pagina quando si clicca sugli ancoraggi.

La potenza stà nel fatto che l'html da inserire nella pagina è lo stesso che inseriremmo in una normale situazione di utilizzo degli ancoraggi.
Esempio;
<a href="#top" >Top</a>


Questo è il codice da inserire nella vostra pagina per ottenere l'effetto desiderato su tutti gli ancoraggi.
window.addEvent('load', function() { new SmoothScroll({ duration: 1800 }); }); 


E' necessario importare all'interno della pagina 2 file javascript:
- Il core dei mootools
- il more dei mootools contenente il plugin Asset
I 2 files sono disponibili qui (core) e qui (more).
<script type="text/javascript" language="JavaScript" src="http://www.franziale.netsons.org/src/js/mootools/mootools-1.2.1-core-nc.js"></script>
<script type="text/javascript" language="JavaScript" src="http://www.franziale.netsons.org/src/js/mootools/mootools-1.2-more.js"></script>

E' possibile trovare un esempio di questa funizionalità a questo link Ancoraggi fluidi

Nessun commento: