CSSLab

Volando con Moo

Tweet

Mootools es más que un excelente framework, es tremenda herramienta de desarrollo. Y de efectos. En su sitio web oficial, la documentación deja algo que desear, y la falta de ejemplos desglosados impide que quienes no estén acostumbrados a esta herramienta pueda siquiera comenzar a usarla. Un efecto que me gusta mucho y que he utilizado un par de ocasiones es FX.Scroll, donde puedes a través de id‘s linkear a secciones dentro de un <div>, y el script te llevará volando hacia su objetivo, con una suave transición. Para que sepan de lo que hablo, vean el ejemplo final:

Ver ejemplo final

Bueno, la idea es mostrar cómo se hace para que uds. puedan replicarlo según sus necesidades. Comenzaré por el HTML que se constituye de 3 partes: el menú (#menu, que lo pueden hacer cómo se les dé la gana, lo importante son los id‘s de los links), el <div> que albergará las secciones (#dentro, que están posicionadas absolutamente) y el contenedor que funciona como una ventana que esconde el resto (#envoltura esconde con overflow: hidden;):

<ul id="menu">
     <li><a id="link1" href="#">Contenido 1</a></li>
     <li><a id="link2" href="#">Contenido 2</a></li>
     <li><a id="link3" href="#">Contenido 3</a></li>
</ul>
<div id="envoltura">
     <div id="dentro">
          <div id="contenido1">
               <h1>1</h1>
          </div>
          <div id="contenido2">
               <h1>2</h1>
          </div>
          <div id="contenido3">
               <h1>3</h1>
          </div>
     </div>
</div>

Ya el CSS es lo que ayuda a la magia (obviaré el estilo del #menu):

#envoltura {
     overflow: hidden;
     height: 300px;
     width: 600px;
     position: relative;
}
#dentro {
     width: 1600px;
     height: 1600px;
     background: url(imgs/fondo.jpg) center center no-repeat;
     position: relative;
}
h1 {
     color: #fff;
     font-size: 200px;
}
#contenido1 {
     position: absolute;
     left: 250px;
     top: 80px;
}
#contenido2 {
     position: absolute;
     left: 800px;
     top: 1200px;
}
#contenido3 {
     position: absolute;
     left: 900px;
     top: 550px;
}

Y finalmente lo que hace la magia, el JS. Antes que todo se linkea mootools.js, y luego el <script> que podemos configurar a nuestro gusto:

var scroll = new Fx.Scroll(‘envoltura’, {
     // envoltura es el id que funciona como ventana
     wait: false,
     duration: 1000,
     // duration es la duración de las transiciones en milisegundos
     offset: {‘x’: -230, ‘y’: -20},
     // offset es la distancia del eje X Y que mostrará los elementos posicionados
     transition: Fx.Transitions.Back.easeInOut
     // transition es el tipo de transición que tendrá, ver ejemplos en mootools.net
});
$(‘link1′).addEvent(‘click’, function(event) {
     // aqui ya comenzamos a darle cada id del <a>…
     event = new Event(event).stop();
     scroll.toElement(‘contenido1′);
     // …hasta qué id tiene que llegar.
});
$(‘link2′).addEvent(‘click’, function(event) {
     event = new Event(event).stop();
     scroll.toElement(‘contenido2′);
});
$(‘link3′).addEvent(‘click’, function(event) {
     event = new Event(event).stop();
     scroll.toElement(‘contenido3′);
});

Bueno, nuevamente les dejo el link al ejemplo final:

Ver ejemplo final