Volando con Moo

16/nov/2007 9

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

Comentarios

  1. Carlos Cazorla [#]

    Mootols es una de las mejores librerias, vale la pena usarla. Buen post J.

  2. Nemawashi » Simulando desplazamiento vertical del navegador. [#]

    […] .: El Código en CSSLAB :. […]

  3. IsaacDM [#]

    SAlu2 Juan, estaria interesante que dieras mas ejemplos de otras aplicaciones con Moo, si la curva de aprendizaje es larga si te quieres meter solo con su documentación.

    excelente articulo, en espera de mas.

    PD. ¿checaste lo del iepngfix que te comente?

  4. pollaki [#]

    copado!

  5. Diezko [#]

    una maravilla!

    pd: nunca aplique JS a una pagina pero voy a probar.
    sediento de mas.

  6. Sebastian [#]

    Jorge,
    Me encantó el script. Luego visité la página de Mootools y poco a poco fui entendiendo en que consiste haste que al final logré desifrar de que se trataba ya que es una de mis primeras experiencias con librerias javascript. Luego intente probar uno de los scripts: FxSlide lei la documentacion pero no logré que funcionara. A raiz de mi primera fascinación por esta librería podría ser un pequeño tutorial de Instalación y funcinamiento de Mootools. Está buenisimo.
    A todo esto muy bueno el sitio.

    Saludos.

  7. Osvaldo [#]

    Excelente, mi amigo. Moo me parecía un viejecito rancio al que no se le podia entender, pero con este ejemplo he quedado completamente fascinado y mi percepción ha cambiado mucho. Mil gracias compadre!

  8. Jorge Epuñan [#]

    si, seguro hare mas cosas con mootools, me entretengo mucho aprendiendo de esto, y compartiedolo con uds. salu2!

  9. Cris [#]

    Hola,podría decirme como hago para linkear (y donde) el mootils.js (que lo he cogido viendo el código en firefox, y no se si estará bien o no) y el script, gracias

Responder a Carlos Cazorla ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab