Scrolling horizontal sencillo en jQuery

scroll-horizontal Una tendencia que está muy fuerte en internet al momento de crear sitios web es la de empezar a dejar de usar el scroll de forma manual, y hacerlo un poco más interactivo. Esto quizá para competir un poco más con los efectos de Flash, pero al final es más interesantes saber que se puede hacer sin la aplicación.

Pues bien, en esta ocasión vamos a ver como crear un scrolling horizontal sencillo en jQuery, para que a base de unos botones podamos navegar en un sitio web de una forma más dinámica, así que empecemos.

Para este tutorial más que saber usar jQuery de una forma muy avanzada, lo necesario es saber usar HTML para poder crear la estructura, con jQuery lo único que hacemos es animar, y con CSS darle el estilo.

HTML

Lo más importante del tutorial es crear la estructura correcta, para este ejercicio el truco consiste en tener dos listas, en una van los botones de inicio y links para mover a las diferentes secciones. La segunda lista contiene a las capas y en general todo el contenido, estas son las más importantes, así que aquí está el código:

<div id="header">
   		<h1 id="logo">Scrolling Clouds</h1>
    	<ul id="menu">
        	<li><a href="#box1" class="link">Home</a></li>
            <li><a href="#box2" class="link">Box 2</a></li>
            <li><a href="#box3" class="link">Box 3</a></li>
            <li><a href="#box4" class="link">Box 4</a></li>
      </ul>
	</div><!-- end header -->
	<div id="wrapper">
    	<ul id="mask">
        	<li id="box1" class="box">
            	<a name="box1"></a>
                <div class="content"><div class="inner">Home Box</div></div>
            </li><!-- end box1 -->
            <li id="box2" class="box">
            	<a name="box2"></a>
                <div class="content"><div class="inner">Box 2</div></div>
            </li><!-- end box2 -->
            <li id="box3" class="box">
            	<a name="box3"></a>
                <div class="content"><div class="inner">Box 3</div></div>
            </li><!-- end box3 -->
            <li id="box4" class="box">
            	<a name="box4"></a>
                <div class="content"><div class="inner">Box 4</div></div>
            </li><!-- end box4 -->
        </ul><!-- end mask -->
    </div>

Tendremos algo como lo siguiente, en donde sólo aparecen las opciones sin algún tipo de estilo.

CSS

Ahora lo que tenemos que hacer es darle estilo a los botones de links y a las capas para que se puedan mover entre ellas. Esta parte podría parecer algo difícil pero en realidad el efecto consiste en hacer largas cada elemento de la lista, entonces como el ancho total de las cuatro capas es mayor que el ancho de nuestra pantalla, sólo se va a mostrar una. Una vez hecho esto de hecho ya sirve en sí todo, basta darle clic a los botones y se cambiará de una capa a otra.

/*** Style Definitions ***/
html				{ background:#67b2ff; font-family:Arial, Helvetica, sans-serif; }   /*** Header ***/  #menu				{ float:right; position:absolute; top:20px; right:10px; z-index:10; }   #menu a				{ background:#FFF; color:#67b2ff; border:#AAA 3px solid;  text-decoration:none; padding:10px;
						margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}   #menu a:hover		{ background:#67b2ff; color:#FFF; border:#FFF 3px solid; text-decoration:none; padding:10px;
						margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}   #menu li			{ float:left; }   /*** Body Content ***/
#wrapper	{ width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; }   #mask		{ width:400%; height:100%; }   .box		{ width:25%; height:100%; float:left; }   .content	{ width:960px; height:400px; top:20%; margin: 0 auto; position:relative; background:rgba(255,255,255, 0.3);
				border-radius:35px; -moz-border-radius:35px; -webkit-border-radius:35px; }   .inner		{ width:920px; height:360px; background:rgba(255, 255, 255, 0.3); border-radius:30px; -moz-border-radius:30px;
					-webkit-border-radius:30px; margin:5px; padding:15px; top:5px; position:relative; }

jQuery

Como les decía, el efecto así como lo tenemos ya sirve, debido a que los links están direccionados a las anclas que tienen los elementos de la lista 2, pero el problema es que sólo con HTML no podemos hacer que la navegación sea animada, por eso recurrimos a jQuery y a una librería que nos permite hacer un scroll muy fácil.

Lo primero que tenemos que hacer como siempre es vincular las librerías, para nuestra suerte los que no tengan host propio no tendrán que preocuparse porque las vinculamos directamente desde sus debidos repositorios.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

Una vez que ya hemos vinculado las librerías es momento de empezar a animar. Y como les decía, es extremadamente fácil hacer esto, lo único que hacemos es animar un scrollTo para todos los links para que en vez de que sólo aparezca una caja después de otra, se animen como si estuvieras recorriendo la pantalla.

$(document).ready(function() {  
		$('a.link').click(function () {  
			$('#wrapper').scrollTo($(this).attr('href'), 800);
			return false;  
		});  
	});

Si realizaron bien ya nada más les faltaría añadir su código para preparar su sitio web. Les dejo los archivos para descargar aquí