MooTools: la librería más completa para trabajar fácilmente con javascript.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 19
Visitas el mes pasado: 16
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
La clase Fx.Morph() de mootools es muy similar a la clase Fx.Tween ya vista en páginas anteriores. Esta clase también se aplica a las propiedades CSS. La diferencia está en que mientras con Fx.Tween() aplicamos el efecto sobre una sola propiedad, con Fx.Morph() podemos aplicar el efecto sobre varias propiedades al mismo tiempo.
La clase Fx.Morph forma parte también del ""core" de mootools, por lo que basta con tener cargado el archivo "core" para poder utilizarla.
Lo primero que debemos hacer es instanciar (crear) un objeto de la clase Fx.Morph, Al instanciarlo pondremos dos argumentos, el primero el elemento al que el efecto va a afectar, y el segundo las opciones, que son las mismas que para la clase Fx.Tween, pero sin la propiedad.
miEfecto=new Fx.Morph("id_elemento",{
duration: 1500,
fps: 30,
transition: "back:out"
});
En primer lugar creamos un nuevo objeto de la clase: miEfecto=new Fx.Morph(). Como primer argumento le pasamos el "id" del elemento al que aplicamos el efecto, y como segundo, las opciones del efecto. Fíjate que las propiedades CSS (opcion property usada con Fx.Tween) no debemos pasarlas ahora con fx.Morph.
Cuando queremos poner en marcha el efecto pondremos el método .start(). En él pasaremos como argumento las propiedades con sus valores finales.
miEfecto.start({
"width":"150px",
"height":"150px"
});
Observa que las propiedades van entre llaves { ... }. Cada propiedad va separada de su valor por el signo de dos puntos. Los pares "propiedad":"valor" van separados entre sí por comas.
Los nombres de las propiedades van siempre entre comillas (a no ser que los pasemos por variables), al igual que los valores (a no ser que sean números, o los pasemos por variables).
Veamos un ejemplo en el que se modifican varias propiedades CSS al mismo tiempo, con efecto de transición. Vemos el ejemplo en el recuadro de la derecha.
Para activar el efecto pulsamos el siguiente botón.
Hemos puesto también que al cabo de unos segundos, el elemento vuelve a su estado original, de esta manera podemos repetir el ejemplo.
En primer lugar vemos el código html del elemento:
<div id="c1"></div>
Y también el código html del botón
<button id="boton1">Efecto</button>
Después ponemos un código CSS para el elemento, el cual nos da su estado original.
#c1 { width: 30px; height: 30px; background-color: blue; margin: 5px; }
Ahora vamos al código javascript/mootools. (siempre dentro de la estructura "domready"). En primer lugar instanciamos el objeto Fx.Morph:
miEfecto=new Fx.Morph("c1",{ duration: 3000, transition: "back:in:out" });
Después ponemos un evento "click" en el botón para activar el efecto. Esto lo haremos mediante el método .start().
$("boton1").addEvent("click",function(){ miEfecto.start({ "width":"150px", "height":"150px", "backgroundColor":"#ff0" }); restaurar.delay(6000) });
Vemos cómo dentro del evento llamamos al método .start() en el cual pasamos como argumento las propiedades CSS y su valor final.
Después hemos puesto una llamada a la función restaurar la cual se ejecuta con un retraso de 6000 milisegundos (.delay(6000)). Esto indica que el próximo paso es crear la función restaurar, la cual devolverá el elemento a su estado original. Por tanto escribimos a continuación el código de esta función:
function restaurar(){ $("c1").setStyles({ "width":"30px", "height":"30px", "backgroundColor":"#00f" }); }
Este último paso (función "restaurar"), no forma parte del efecto, sin embargo lo hemos puesto para completar el ejercicio, y poder repetir el efecto.
Recuerda que todo el código javascript/mootools debe estar dentro de la estructura "domready" para que tenga efecto, ya que estamos trabajando con elementos de la página que deben estar cargados cuando los nombramos en el código.
En la siguiente página seguimos trabajando con efectos, veremos cómo encadenar efectos
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com