14 oct Tricks

Diseño web animado con ScrollTo y Jquery

Para poder diseñar en estilo “one page”, se pueden utilizar diferentes técnicas o tipos de animación, en este post vamos a utilizar un plugin de Jquery llamado “Scroll To”, este nos permite hacer la animación de recorrido tanto en horizontal como en vertical, podemos utilizarlo de diferentes maneras de acuerdo a nuestro diseño.

Te mostraremos como lograr este efecto de un manera fácil y rápida.

Vamos a comenzar con la creación de un fondo, el cual nos va a ayudar a para que quede el diseño de nuestro animación. En este fondo pondremos las 3 sección de las cuales constará nuestro recorrido.

Esta es la imagen que tendrá cada una de nuestras secciones ahora comencemos con lo básico, lo primero que debemos hacer agregar la liga a nuestro Jquery y a el plugin ScrollTo en nuestro archivo HTML, el pllugin lo podemos descargar desde su página oficial o ya viene incluido en los archivos de descarga de este tutorial.


<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo.js"></script>

Código HTML

Ahora vamos a definir cada uno de los elementos contenidos dentro de nuestro sitio, en este caso nuestro HTML queda de la siguiente manera


     <div id="nav"> <!-- Menu de nuestro sitio -->

        <ul>
            <li><a href="#">Sección Uno</a></li>
            <li><a href="#">Sección Dos</a></li>
            <li><a href="#">Sección Tres</a></li>

        </ul>

    </div>

    <div id="contenedor"> <!-- Contenedor para nuestra información -->

        <div id="uno" class="cont"><!-- Contenedor 1 -->

            <!-- Aqui va el contenido que quieres para cada sección -->

        </div>

        <div id="dos" class="cont"><!-- Contenedor 2 -->

            <!-- Aqui va el contenido que quieres para cada sección -->

            <a href="#">Volver al menu</a>

        </div>

        <div id="tres" class="cont"><!-- Contenedor 3 -->

            <!-- Aqui va el contenido que quieres para cada sección -->

            <a href="#" class="regresar">Volver al menu</a>

        </div>

    </div>

La primera parte es donde creamos nuestro “menu” al cual definimos con un ID “nav”, después creamos un “Contenedor”, en este vamos a definir nuestro fondo y el contenido por secciones que necesitamos. En mi caso lo dividí en 3 pequeños contenedores los cuales me servirían para agregar el contenido necesario a mi portal, es importante agregar un ID para cada uno de nuestro contenedores y menú, ya que este es el que nos ayudará a activar nuestra animación.

Un poco de forma con CSS


/*Definimos la anchura de nuestro menu y contenedor y los centramos*/
#contenedor, #nav,{ width:960px; margin:0 auto;}

        /*Agregamos el Bacground de nuestro contenedor*/
	#contenedor { background:url(bg.jpg) no-repeat;}

        /*Aqui definimos cada uno de nuestros contenedores: ancho y alto*/
	.cont { width:960px; height:600px;}

	#nav { height:50px;}

        /*Es importante definir una separación considerable para que se note nuestra animación*/
	#uno, #dos {margin:0 0 650px 0;}

        /*Esta parte es para la creación del menu*/
	#nav ul { float: right;}

	#nav ul li { float:left; list-style:none; margin:0 20px 0 0;}

	#nav ul li a { text-decoration:none; color:#fa2a00; background:url(bg_btn.png) no-repeat; width:125px; height:44px; display:block; padding:15px 0 0 0; text-align:center; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}

	#nav ul li a:hover { color:#333333; }

        /*Creamos nuestro boton de regreso*/
	.regresar { background:url(regresar.png) no-repeat; height:63px; width:50px; display:block; text-indent:-99999px; float:right; margin:30px 0 0 0;}

	.regresar:hover { background-position:bottom;}

La parte mas importante de nuestra hoja de estilos es el definir un espacio entre cada uno de los contenedores, esto es importante para que se note nuestra animación de lo contrario no alcanzaríamos a percibirla.

Dándole vida con Jquery y ScrollTo

Ahora que ya pasamos la parte mas larga, solo debes de agregar un pequeño código a cada uno de nuestros botones y LISTO!!!


            <li><a href="javascript:$.scrollTo('#uno',800);">Sección Uno</a></li>
            <li><a href="javascript:$.scrollTo('#dos',800);">Sección Dos</a></li>
            <li><a href="javascript:$.scrollTo('#tres',800);">Sección Tres</a></li>

Los ID #uno, #dos y #tres definen el lugar o contenedor al que queremos que se desplace, y el numero 800 es la duración que le hemos asignado a nuestro recorrido.

De la misma manera le agregaremos el codigo a nuestro boton de regreso


        	<a href="javascript:$.scrollTo('#nav',800);" class="regresar">Volver al menu</a>

Este plugin cuenta con diferentes variables que se le pueden asignar, si te interesa conocer mas sobre ScrollTo visita la página oficial

Deja tu comentario