Un portfolio a scorrimento orizzontale con HTML5 e JQuery

In questo articolo ci occuperemo della realizzazione di un template HTML, perfettamente funzionante e completo di Javascript e CSS, con un layout non convenzionale a scorrimento orizzontale, ideale per un portfolio personale o una galleria fotografica. In partenza non posso non citare The Horizzontal Way, la splendida collezione di siti orizzontali di Marco Rosella, un'ottima risorsa di ispirazione. Le tecniche dell'esempio che applicheremo tra poco derivano invece da due tutorial scovati su CSS-Tricks e The Web Squeeze.

Allo scopo di attuare lo scorrimento orizzontale e la comparsa della barra, la soluzione più classica consiste nell'impostare arbitrariamente la larghezza del body o di un elemento contenitore ad un valore molto elevato (3000-10000 px), e nel rendere flottanti le varie sezioni del contenuto. In questo modo però, si finisce per pregiudicare la flessibilità del documento, in cui invece il flusso dei contenuti dovrebbe essere libero di espandersi in larghezza, come viceversa avviene in altezza per un layout con andamento classico verticale.

Per ovviare a questa problematica, invece di fissare la larghezza del body, ricorreremo a poche righe di codice Javascript: il metodo prevede essenzialmente di inserire nel documento una tabella tramite i metodi DOM di JQuery e di racchiudere le sezioni del contenuto in molteplici celle di una lunghissima riga. Tutto questo, in modo assolutamente non intrusivo: infatti, con Javascript disabilitato, i contenuti della pagina verranno visualizzati nel browser seguendo il normale flusso di scorrimento dall'alto in basso, con un downgrade che non pregiudica la fruibilità.

La struttura HTML e gli stili CSS

Per il template sono stati impiegati alcuni dei nuovi tag HTML5, come header, footer, section, article e figure; la struttura delle due pagine realizzate è composta essenzialmente da tre elementi principali:

• header, (può contenere il logo o titolo del sito e il menu di navigazione), posizionato in maniera da rimanere fisso allo scorrere del documento;
• footer, anch'esso posizionato in modo analogo all'header, ma questa volta collocato in fondo alla pagina;
• container, un blocco libero di espandersi in larghezza in funzione dei contenuti veri e propri delle pagine: immagini con didascalia (figure), articoli di testo (article), etc).

<header>
	<h1 id="logo">Horizontal5</h1>
	<nav>
		<ul>
			<li><a class="selected" href="index.html" title="gallery">gallery</a></li>
			<li><a href="blog.html" title="blog ">blog</a></li>
			<li><a href="mailto:info@yoursite.com">info</a></li>
		</ul>
	</nav>
</header>
<section id="container">
	<figure>
		<img src="images/aereo.jpg" alt="mezzo di soccorso aereo">
		<figcaption>Aereo di soccorso antincendio, Cefalonia, Grecia.</figcaption>
	</figure>
	<figure>
		<img src="images/incendio.jpg" alt="speginimento incendio">
		<figcaption>Speginimento incendio, Cefalonia, Grecia.</figcaption>
	</figure>
	<figure>
		<img src="images/fumo.jpg" alt="speginimento incendio">
		<figcaption>Speginimento incendio, Cefalonia, Grecia.</figcaption>
	</figure>
</section>
<footer>
	<p>2010 - <a href="http://html.it">HTML.IT</a></p>
</footer>

Il codice CSS utilizzato è abbastanza completo e comprende:

• regole generali di reset;
• regole per l'aspetto tipografico; grazie alla regola @font-face è possibile utilizzare anche un font non di sistema, caricato nella cartella degli stili in vari formati per assicurare la compatibilità dei vari browser. A tal proposito sul sito Font Squirrel sono disponibili molte collezioni di font liberi in kit già pronti per l'uso;
• regole per gli elementi strutturali: come già detto, per header e footer è stata utilizzata la regola position:fixed, tramite la direttiva !important. La dichiarazione successiva, position:absolute, è specifica per il browser Internet Explorer 6. Per quanto riguarda la sezione container, è necessario assegnare un padding-top pari all'altezza dell'header che essendo fisso è sottratto al flusso del documento. Agli elementi article e figure è applicata una larghezza fissa.

Il codice Javascript

Innanzitutto, affinché i nuovi tag HTML5 vengano letti anche dalle versione di Internet Explorer precedenti alla 9, è necessario includere negli appositi commenti condizionali un piccolo script di Remy Sharp, html5shiv, che si occupa di creare gli elementi necessari tramite Javascript e renderli così disponibili anche per il browser Microsoft. Succesivamente è possibile includere la versione più aggiornata del framework JQuery prelevandola dal sito ufficiale.

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><script src="js/jquery-1.4.2.js" type="text/javascript"></script>

Il codice Javascript necessario per trasformare il layout da verticale a orizzontale è veramente semplice (esempio):

$(function(){
	$("#container").wrapInner(document.createElement("tr"));
	$("#container").wrapInner(document.createElement("table"));
	$("article, figure").wrap("<td>");
});

Tramite l'adozione del plugin di JQuery Lazy Load, si può differire il caricamento delle immagini della galleria che non sono visibili nel viewport del browser, ottenendo un minore tempo di download della pagina e un piacevole effetto "fade in" allo scorrere del documento. Una volta incluso lo script nell'head, basta modificare la funzione $(document).ready
aggiungendo il seguente codice Javascript (l'esempio in opera):

$("img").lazyload({ effect : "fadeIn" });

Un'altra interessante funzionalità da implementare è quella di rendere draggabile il container in modo da consentire lo scorrere del documento con questo controllo, in aggiunta alla barra di scorrimento orizzontale. Affinchè il drag sia azionato agevolmente, è necessario impedire la selezione del documento e dei suoi elementi, e riabilitare la proprietà solo su alcuni di essi, altrimenti inutilizzabili (ad esempio, i campi di un form). Di seguito il codice e la pagina dimostrativa:

var intX = null;
var once = 0;
$('#container').mousedown( function( event ) {
	$('html,body').stop();
	intX = event.pageX;
	return false;
});
$(document).mousemove( function( event ) {
	if( intX !== null ) {
		var moveX = $(window).scrollLeft() + -(event.pageX - intX);
		$(window).scrollLeft(moveX);
		if($(window).scrollLeft() == 0 ){
			if(!once){
				intX = event.pageX;
				once = 1;
			}
			$('#container').css({ left: -moveX });
		}
		$(this).css({ 'MozUserSelect' : 'none' });
		return false;
	}
});
$(document).mouseup( function( event ) {
	if( intX !== null ) {
		once = 0;
		intX = null;
	}
});  	  	  	
$('input, select, option, label, textarea, button, article').mousedown( function(){
	$( this ).focus();
});