Menu

Scroll verticale animato con fullPage.js

fullPage.js un plugin jQuery per realizzare uno scroll verticale animato

Qualche giorno fa, ero alla ricerca di un plugin jQuery che mi permettesse, di implementare un effetto "One Page Scroll", alle sezioni del progetto a cui stavo lavorando. Potete vedere un esempio di ciò che stavo cercavo all'indirizzo ufficiale di fullPage.js.

scroll sito web verticale ed orizzontale con fullPage

Bene, ho trovato molto più di quel che cercavo. Questo plugin infatti, permette di rendere la navigazione "scrollabile" sia verticalmente che orizzontalmente, inoltre nella pagina ufficiale del progetto, dove troverete anche una demo per scoprirne le funzionalità, potrete trovare tutte le personalizzazioni possibili grazie alle API che ne aumentano le potenzialità.

L'inserimento di fullPage.js nella vostra pagina HTML è basato sull'inserimento delle vostre sezioni in questo modo:

La vostra sezione 1
La vostra sezione 2
La vostra sezione 3
La vostra sezione 4
...

Mentre per quanto riguarda i file da includere nella vostra pagina per il corretto funzionamento di fullPage.js:

link rel="stylesheet" type="text/css" href="jquery.fullPage.css"
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
script type="text/javascript" src="jquery.fullPage.js"

Se visitate la repository di GitHub di fullPage, potrete vedere come è stato utilizzato in alcuni progetti di noti brand come Sony, McDonalds e British Airways.
Alla prossima!

Raccontalo su Facebook

Dillo con un Tweet