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
• footer
• container figure article

<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 Font Squirrel
• regole per gli elementi strutturali: come già detto, per header footer position:fixed !important position:absolute container padding-top header article figure

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();
});