Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (II Efectos)

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

MooTools2 (IV)

La Clase Fx.Morph

Introducción

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.

Sintaxis de la clase Fx.Morph

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).

Ejemplo con Fx.Morph

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.

Efecto

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

Encadenar efectos

Página creada por ANYELGUTI.

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