Juan Manuel 16 de julio de 2008 a las 13.10
   Imprimir artículo
elWebmaster.com

C√≥mo dise√Īar un sitio web con scroll horizontal con CSS y jQuery


C√≥mo dise√Īar un sitio web con scroll horizontalLo 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.

C√≥mo dise√Īar un sitio web con scroll horizontal con CSS y jQuery

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:

¬°Espero ver tu sitio con scroll horizontal muy pronto!

Fuente: CSS-Tricks


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (5)

  1. Marga dice:

    No fuinciona en iexplorer 6 ni 7

  2. dise√Īo web chile dice:

    A mi me resulta en esos navegadores, pero tengo problemas con opera..

  3. jose JO dice:

    soy principiante, y la verdad quiero hacer mi blog horizontal, aunque aquí estee este código no se que hacer con el, si me pueden dar alguna orientación, o decirme con que lo edito y donde lo pego se los agradecería un monton.

    eso me ayudaría bastante gracias de antemano, mi mail es jarenasmuller@gmail.com

  4. IMPRENTAS EN CORDOBA dice:

    EL SCROOL HORIZONTAL ES EL FUTURO DEL INDEX, COMO PAGINA DE ESCAPARATE!!

    TENDENCIAS 2011.-

    SALUDOS

  5. Carolina dice:

    Hola,

    Muchas gracias de antemano. Tengo un problema y no se como resolverlo, a ver si me puedes ayudar. Lo que quiero es que el primer div quede centrado horizontalmente y que a partir de ahí funcione el scroll normalmente.

    Un saludo

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder