JavaScript SmoothScroll, scrolling effetto scorrimento verticale morbido

20 Comments

Uno degli effetti che maggiormente mi attrae è lo scroll locale di una pagina xHtml, sia esso orizzontale o verticale. Oltre all’effetto, che in se per stesso anima la pagina, possiamo in molti casi scoprire tutta una serie di contenuti che normalmente andrebbero persi saltando senza scroll da un contenuto all’altro.

 

Ultimamente questo genere di soluzione è sempre più in voga tra i web-designer, le nuove implementazioni di AJAX e l’utilizzo di Frameworks Javascript esterni vengono ben incontro a queste esigenze. Sono molti i siti di successo che utilizzano quest’effetto, come Pivonka.euDesigner.rs, AuthenticStyle.com, e tanti altri ancora.

Vi mostro 3 modalità diverse per realizzare quest’effetto, sia tramite il semplice script Javascript Smoothscroll, sia tramite JQuery, che utilizzando la libreria Mootools. Potete scaricare i files di esempio e capire il funzionamento dal codice di ognuno, in ogni modo importate lo script che desiderate in questo modo:

 

<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/moo-smooth.js" type="text/javascript"></script>

 

Naturalmente la scelta dello script da integrare dipende da vari fattori, soprattutto legati alle necessità di customizzazione ed integrazioni con altri script presenti nella pagina, ad esempio si potrebbero verificare dei conflitti tra le librerie JQuery e Mootools, anche se naturalmente ci sono dei piccoli hack per risolvere queste incongruenze, parleremo comunque di questo più avanti in questo blog.

 

Sia per facilità d’utilizzo che per capacità di customizzazione delle varie Transitions Tweens lo SmoothScroll Mootools è il mio preferito. Che dire, non avete più scuse, scegliete quello che preferite e che più si adatta al vostro progetto… smooth scrolling it now!

 

Simple Smoothscroll

View Demo

Download Source

 

JQuery Smoothscroll

View Demo

Download Source

 

Mootools Smoothscroll

View Demo

Download Source

Comments

maurizio
December 1, 2009

ciao david, complimenti per il blog e grazie per aver postato gli esempi di smoothscroll.
ho un problema, utilizzando mootools e caricandolo nella mia pagina (nella quale sono già
presenti altri script java) non funziona..
o meglio, funziona, ma gli altri script smettono di funzionare.. per intenderci, gli altri script nella pagina sono relativi al fancybox, a seconda di dove posiziono le stringhe di richiamo allo script, la pagina varia di funzionamento..
o funziona il fancybox, o funziona lo scroll, credo ci sia un problema di combatibilità e quindi di conflitto, ho letto che tempo fa hai scritto che queste possibilità erano prevedibili, ma risolvibili.. puoi aiutarmi per favore? a qualcun altro è mai successo un problema di questo tipo?

grazie in anticipo

David
December 1, 2009

ciao Maurizio,
esatto come dici te non puoi utilizzare mootools e jQuery insieme perchè entrambe utilizzano shortcut comuni , esempio: “$”, e vanno in conflitto. Mi sembra che quella che metti prima funziona mentre la seconda importata no.
Per risolvere questi conflitti puoi risolvere in diversi modi che puoi trovare tutti descritti qui:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Questo un’altro link utile:

http://davidwalsh.name/jquery-mootools

Il tutorial è molto semplice… in una soluzione devi praticamente sovrascrivere in jQuery il termine “$”. Prova sennò ad importare prima jQuery..

Se dovessi avere altri problemi e stai utilizzando ad esempio un Fancybox, installa un altro visualizzatore immagini compatibile alla libreria che hai scelto. In questo modo risparmi anche su kb caricati!

spero possa esserti stato di aiuto!

maurizio
December 1, 2009

ti ringrazio.. ho letto, il 2° link lo avevo già visitato questa mattina ma senza aver risolto il mio problema,
diciamo pure che non ci ho provato in quanto non capisco cosa dice di fare :)
chiedo scusa per l’ignoranza in materia..
se è cosi semplice la soluzione del sovrascrivere il termine “$”, puoi dirmi tu in 2 righe cosa dovrei fare?

maurizio
December 1, 2009

ho risolto, grazie ugualmente!

maurizio
December 1, 2009

ti chiederei solo una cosa, vedo che nell’esempio che hai postato (e di conseguenza nella mia pagina)
una volta azionato lo scroll compare nella barra indirizzi la scritta “#top” dopo il mio link..
ho visto che su questo blog non lo fa, come hai fatto?

David
December 1, 2009

Ho usato un altra soluzione! Qualche segreto fammelo tenere!….
ciao
d

Manuela
April 7, 2010

Ciao David, complimenti per il blog!
Ti ringrazio di aver pubblicato questo bell’articolo, perchè è proprio quello che cercavo.
La prima volta l’ho provato su un html scarno, solo con delle ancore, per vedere come funzionava. E funzionava :)
Adesso che ho creato il sito completo…non funziona più :( !!
Inizialmente pensavo andasse in conflitto con lo script di highslide. Così l’ho tolto per vedere se fosse quello il problema, ma non funziona ugualmente. Quale potrebbe essere il problema?
Grazie in anticipo!

David
April 7, 2010

ciao, senza sorgente è un pò difficile..cmq prova a fare una copia della pagina e togli via via elementi fino ad avere una versione scarna, così capisci dove è il problema. In caso controlla con Firebug tutti gli import perchè magari non trovalla libreria se usi Mootools o jQuery.
ciao
d

Matt
May 11, 2010

ciao david,
mi assoccio ai complimeti, blog utilissimo!
ti volevo chiedere, per trasformare lo scroll da verticale ad orizzontale che parametri devo cambiare?
sto implementando Simple Smoothscroll.
grazie mille!
Matt.

David
May 11, 2010

Ciao Matt, prova con jQuery, quello che usi non mi sembra supporti lo scroll orizzontale, in caso prova anche a cercare ” horizontal smoothscroll” su google, troverai ormai tantissimi esempi!
grz
d

Domenico
June 17, 2010

Ciao David,
complimenti vivi per il blog e per l’articolo in particolare. Volevo chiederti: è possibile far funzionare lo scroll anche nel caso in cui si provenga da una pagina esterna? Ho provato brutalmente con un link con ancora ( es. paginadestinazione.htm#ancora) ma sembra non funzionare.

David
June 17, 2010

ciao, far funzionare da una pagina esterna è un po piu complicato, perchè quando link finisci direttamente alla sezione…
dovresti linkare in testa alla pagina (ad un determinato id) e qui realizzare una funzione che successivamente al caricamento della pgina ti rispara alla tua sezione in modo da vedere l’effetto.
ciao

Stefano
December 31, 2010

complimenti per il blog, lo ho scoperto ora e a breve voglio provare ad utilizzare i tuoi esempi. poi ti saprò dire degli esiti
un grazie ancora
ciao

Alfy
March 18, 2011

Ciao David complimenti per il blog, volevo chiederti se sai darmi indicazioni di compatibilità per moo-smooth.js con internet explorer.

Grazie

David
March 18, 2011

Su con versione di Internet Explorer stai testando lo script?

Marcello Kabora
July 18, 2011

Ciao David,
mi chiedevo come posso richiamare questo evento attraverso flash, puoi aiutarmi?
grazie ciao

Marcello Kabora
July 18, 2011

Grazie del link, purtroppo nn e completo il progetto, perche nn riesco a rintracciare i sorgenti.
Non credo sia del tutto affidabile questo tutorial? che ne pensi?

Marcello Kabora
July 21, 2011

Ho risolto il problema grazie da qui – http://www.actionscript.org/forums/showthread.php3?t=215435

silvia
September 15, 2011

MI HAI RISOLTO UN GRAN PROBLEMA…. ti adoro!!! grande!!!

Add Comments