Quando Apple presentò al mondo l'iPhone 5C rese anche popolare la tipologia di pagina Web che accompagnava il lancio del nuovo nato nella sua famiglia di smartphone. La caratteristica essenziale di quella pagina si coglie scorrendo in basso con il mouse. Piuttosto che avere uno scrolling continuo, come è naturale attendersi, l'avanzamento verso il basso effettuato con il mouse attiva infatti una serie di pannelli che hanno ciascuno l'altezza del 100%. Il tutto è accompagnato da una serie di animazioni sullo scrolling con cui viene composto di volta in volta l'apparato grafico della pagina. La navigazione tra i pannelli può avvenire anche usando le frecce direzionali sulla tastiera o il menu a pallini situato sulla destra.
Poche settimane dopo il lancio di iPhone 5C iniziarono a circolare i primi script che emulavano la pagina di Apple. Tra questi troviamo anche FullPage.JS. In questo articolo vedremo i pochi e semplici necessari a ricreare una pagina come quella di Apple grazie a questo plugin per jQuery.
È evidente che parliamo di una soluzione non adatta a siti con contenuti complessi e molto strutturati, ma se si tratta di realizzare mini-siti destinati alla presentazione di un prodotto, di un servizio, di una app, etc. può rivelarsi una scelta da prendere in considerazione, una variante interessante nell'ampio campo dei siti a pagina singola oggi tanto di moda.
Scaricare FullPage.JS
FullPage.JS può essere scaricato sotto forma di pacchetto zip dal repository GitHub del progetto. All'interno del pacchetto, nella cartella principale, ritroviamo tutti i file necessari alla realizzazione delle nostre pagine a pannelli: lo script .js (in versione normale e minificata) e il foglio di stile jquery.fullPage.css. Nella cartella 'vendors', invece, è presente il file jquery.easings.min.js. Esso va usato se si decide di usare gli effetti di easing per le transizioni aggiuntivi rispetto a quelli di default.
Struttura HTML della pagina
Una volta in possesso di questi file, possiamo mettere mano al codice. Per dare concretezza a quanto stiamo dicendo, analizziamo il codice della nostra prima demo.
Nella head del documento dichiariamo innazitutto i fogli di stile, prima quello di FullPage, poi gli altri con cui assegneremo gli stili alle varie sezioni del documento:
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="demo-1.css" />Passiamo poi a inserire i riferimenti a librerie e script, ricordandoci di incorporare prima di tutto jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.easings.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>A questo punto passiamo alla struttura della pagina vera e propria. FullPage.JS prevede due tipi di pannelli: verticali e orizzontali (nella demo sono pannelli orizzontali quelli della seconda sezione). I pannelli principali, quelli verticali, vanno definiti come div con classe .section:
<div class="section" id="section-1"><h1>Sezione 1</h1></div>
<div class="section" id="section-2"></div>
<div class="section" id="section-3"><h1>Sezione 3</h1></div>
<div class="section" id="section-4"><h1>Sezione 4</h1></div>Se si usano pannelli orizzontali, essi vanno racchiusi in uno dei div con classe .section, assegnando a ciascuno la classe .slide:
<div class="section" id="section-2">
<div class="slide" id="slide-1"><h1>Sezione 2 - Slide 1</h1></div>
<div class="slide" id="slide-2"><h1>Slide 2</h1></div>
<div class="slide" id="slide-3"><h1>Slide 3</h1></div>
<div class="slide" id="slide-4"><h1>Slide 4</h1></div>
</div>Tutto qui. Avendo mantenuto la nostra demo nei limiti dell'essenziale non c'è altro da aggiungere, ma nulla impedisce di arricchire il markup e la struttura interna dei pannelli in base alle proprie esigenze.
Opzioni di configurazione
Nel CSS che accompagna la demo (demo-1.css) sono state definite una serie di regole di stile essenziali, come quelle per il colore di sfondo dei vari pannelli e l'impostazione per lo sfondo della prima sezione. Ci limitiamo a segnalare quella con cui centriamo orizzontalmente i contenuti dei pannelli:
.section{
text-align:center;
}Riguardo alla centratura verticale, invece, va tenuto presente che di default lo script centra i contenuti su quell'asse. Questo comportamento, lo vedremo, può essere modificato via Javascript.
Non rimane che inizializzare lo script:
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
css3: true
});
});
</script>Nella nostra demo iniziale abbiamo specificato, tra le tante disponibili, un'unica opzione: css3. Impostata sul valore true fa sì che lo script esegua lo scrolling sfruttando le trasformazioni CSS3 invece che la componente Javascript, rendendo così lo script compatibile con i dispositivi mobili e touch. Sui browser che non supportano le trasformazioni CSS3 si ricorre a un fallback Javascript.
Nella seconda demo abbiamo usato proprio l'opzione verticalCentered: false che rimuove la centratura verticale automatica. In questo caso i contenuti dei pannelli andranno ovviamente sistemati sfruttando i CSS in modo da collocarli come richiesto dal progetto iniziale.
L'opzione loopBottom: true serve invece a far sì che scorrendo in basso una volta raggiunta l'ultima sezioni, si torni automaticamente alla prima.
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
verticalCentered: false,
loopBottom: true,
css3: true
});
});
</script>Non possiamo in questa sede esaminare tutte le opzioni dipsonibili per configurare lo script. Rimandiamo alla documentazione ufficiale dove sono esposte con una certa chiarezza. Ci limitiamo a due casi. Il primo riguarda la possibilità di aggiungere la navigazione a pallini come sul sito di Apple. L'abbiamo attivata nella terza demo con questa semplice istruzione:
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
navigation: true,
css3: true
});
});
</script>Infine, un esempio con una navigazione collocata in un header fisso. In questo caso si dovrà naturalmente creare nell'HTML una struttura di menu ad hoc:
<ul id="menu">
<li data-menuanchor="sez-1"><a href="#sez-1">Sezione 1</a></li>
<li data-menuanchor="sez-2"><a href="#sez-2">Sezione 2</a></li>
<li data-menuanchor="sez-3"><a href="#sez-3">Sezione 3</a></li>
<li data-menuanchor="sez-4"><a href="#sez-4">Sezione 4</a></li>
</ul>Come si vede, se usiamo una lista, i singoli li vanno valorizzati con un attributo data-menuanchor che contiene il riferimento ai singoli pannelli. Il valore di questo attributo va poi usato per valorizzare l'attributo href dei link del menu.
Una volta strutturato così il menu, dobbiamo solo 'comunicare' allo script qual è l'elemento che fa da menu e quali sono le àncore:
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
anchors: ['sez-1', 'sez-2', 'sez-3', 'sez-4'],
menu: '#menu',
scrollSpeed: 500
});
});
</script>Oltre alle varie opzioni, ricordiamo anche che FullPage.JS offre la possibilità di eseguire specifiche funzioni di callback in corrispondenza di eventi come il caricamento, la comparsa o la scomparsa di un determinato pannello. È esattamente il meccanismo su cui si basano le animazioni presenti sul sito di Apple. Nel pacchetto zip reperibile su GitHub è disponibile una demo che emula alla perfezione la pagina dell'iPhone 5C. È un ottimo spunto per chi volesse implementare un effetto simile.
