Cómo diseñar un sitio web con scroll horizontal con CSS y jQuery

Lo natural en la web parece ser el flujo vertical de los elementos, cuanto más contenido hay en una página, más larga se vuelve la misma. Esto responde a criterios de usabilidad dado que estamos acostumbrados a leer líneas de texto cortas que, una debajo de otra, conforman los párrafos de un texto.

Pero ¿se pueden romper los estándares? La respuesta es: “depende de tu propósito”. Si lo que quieres es distinguirte, tu público tiene el ojo entrenado y el tipo de contenido de tu sitio amerita dinamismo ¡bienvenido sea el scroll horizontal! Entérate cómo conseguirlo y conoce los mejores ejemplos.

Scroll horizontal en tu sitio web

Seguramente algunos peguen un grito porque voy a sugerir una estructura de tabla para el layout. Pero déjenme explicar el por qué. Lo que necesitamos es un elemento que se pueda expandir horizontalmente como una fila de celdas de una tabla. Las celdas se expandirán lo suficiente como para contener cualquier elemento/s que le pongamos dentro sin cambiar a la línea de abajo si no se ha especificado una nueva fila.

Supongamos que por ahora sólo queremos mostrar una serie de posts de nuestro blog en forma horizontal. Necesitaríamos la siguiente estructura:

<table>
  <tr>
    <td>
       ..  blog post #1
    </td>
    <td>
       ..  blog post #2
    </td>
    <td>
       ..  blog post #3
    </td>
  </tr>
</table>

Asqueroso ¿no? Nó sólo porque estamos usando una tabla, sino porque nada de lo que hicimos fue semántico. Pero este código lo generaremos dinámicamente. La estructura que vamos a usar en nuestro HTML, de acuerdo con el formato anterior, sería:

<div class="post">
  .. blog post #1 ..
</div>
<div class="post">
  .. blog post #2 ..
</div>
<div class="post">
  .. blog post #3 ..
</div>

¡Usando jQuery podemos tener lo mejor de ambos mundos!

El scroll funcionará incluso cuando Javascript o CSS estén desactivados.

Aplicando jQuery y Javascript para lograr el scroll horizontal

Pensemos en lo que queremos por resultado:

• Reunir todos los posts en una misma tabla y en una única fila.
• Asignar a cada post una celda de la tabla.

Este es el script que necesitamos incluir en el head de nuestra página para utilizar jQuery:

<script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	$(function(){
		$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
		$(".post").wrap("<td>");
	});
</script>

¡Eso es lo que hace la magia! Fíjate cómo el cellspacing es agregado como un atributo inline del elemento tabla. Normalmente buscaríamos aplicar un padding a las celdas mediante estilos CSS, pero aquí queremos asegurarnos de que cada post del blog sea legible a pesar de que se hayan desactivado los estilos de la página.

Por ende, nuestro CSS debería ser así:

/*
	RESETEO y SETUP BASICO
*/
* 		{ margin: 0; padding: 0; }
body 		{ font-size: 62.5%;
			font-family: 'Lucida Grande', Helvetica, sans-serif;
			background: #121212; padding: 20px; color: #999; }
table tr	{ vertical-align: top; }
/*
	ESTRUCTURA
*/
.post 		{ width: 500px; }

/*
	TYPOGRAFIA
*/
p		{ font-size: 1.2em; margin: 0 0 15px 0; }
h1		{ font-family: Helvetica, sans-serif; font-size: 4.0em;
		 letter-spacing: -1px; color: #ccc; }
h2		{ font-family: Helvetica, sans-serif; font-size: 3.0em;
		 letter-spacing: -1px; color: #ccc; }
a		{ color: #0066cc; }
a:hover		{ color: #ccc; }

El ancho estático del div .post controla el ancho de cada bloque. La propiedad vertical-align de la fila de la tabla los mantiene alineados al principio de las celdas de la tabla. Por defecto se asignaría al medio, de modo que es necesario.

Haz clic aquí para ver la demo de el scroll horizontal que hemos creado.

Descarga los archivos para editarlos tú mismo desde el sitio de CSS-Tricks.

Algunos ejemplos de buenos sitios con scroll horizontal

Para que te inspires:

• norma cordova photography
• jodi moore | portfolio
• Urban Outfitters: Blog
• Evanescence
• Nana
• Beca
• Radio Zen
• The Horizontal Way

¡Espero ver tu sitio con scroll horizontal muy pronto!

Fuente: CSS-Tricks