27.08.2016

Test di sviluppo: One page site full page scroll

One page scroll - Michele Settembre

Il full page scroll è una delle mode di questa generazione, l’azione di scroll permette di spostarsi verticalmente attraverso differenti slide per diversi contenuti del sito.

Un progetto in entrata (e non più entrato) prevedeva la costruzione di un sito one-page, ovvero un sito che non prevede il caricamento di pagine per mostrare contenuti ma svolge tutte le sue funzionalità all’interno di una sola pagina.

Il concetto viene sviluppato considerando il monitor dell’utente come un visore per slide di presentazione, ognuna delle quali mostra contenuti diversi del sito. Una particolarissima caratteristica di questa moda generazionale è quella di coinvolgere lo scroll del mouse imponendo attraverso la programmazione javascript, di annullare l’azione consueta di scroll che è quella di muoversi verticalmente di alcune centinaia di pixel ad ogni “dente” dello scroll del mouse e di sostituire questa azione con il passaggio da slide a slide al singolo attivarsi dell’uso dello scroll (per questo full page scroll perchè lo scroll attiva il cambio di slide e quindi muove una intera pagina).

Questa azione può essere programmata sia per il movimento verticale che per quello orizzontale.

Al punto dello sviluppo in cui mi trovavo avevo quattro slides poste verticalmente e alla seconda slide, considerando la prima, la home, quella in cima, avevo quattro slides poste orizzontalmente.
Per non buttare il lavoro ho deciso di convertire rapidamente il progetto in un esempio di sviluppo che mostrasse questa tecnica e come può essere rapidamente (per uno sviluppatore) modificata per aggiungere contenuti.

Ho reso la prima slide una home di introduzione, la seconda, composta da slides poste orizzontalmente, una galleria fotografica, e la terza e la quarta slide in pagine con contenuti informativi.

Menu
cancel