[Mootools][1] 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

, 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][2]{.verejemplo}

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

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;):



     

          

               

1


          

          

               

2


          

          

               

3


          

     

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