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.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

MooTools2 (VI)

La clase Fx.Elements

Introducción

Hasta aquí hemos tratado en este manual el archivo "core" de mootools, a partir de esta página y hasta el final del manual, iremos viendo los elementos que se pueden incorporar con el archivo "more".

Empezaremos con la clase Fx. En ésta página y las siguientes veremos las distintas clases de Fx que podemos incorporar con el archivo "more".

Fx.Elements: sintaxis

La clase Fx.Elements() permite aplicar efectos diferentes a los distintos elementos de una clase o de un array de elementos.

En primer lugar debemos instanciar el objeto:

miefecto=new Fx.Elements($$(".unaClase",[opciones])

El primer argumento que pasamos es un grupo de elementos (array), mediante la clase "Elements", con el signo de doble dolar ($$). Aquí hemos pasado una clase CSS, pero podríamos haber pasado por ejemplo todos los párrafos de la página ($$("p")), o los párrafos de un "div id="capa1" ($$("#capa1 p"")).

En el segundo argumento pasamos las opciones de "Fx", las cuales son las mismas que para Fx.Morph, (duration, transition, fps, etc.). Lo hacemos exactamente igual que con las clases Fx vistas hasta ahora.

Después, para realizar el efecto, le aplicamos al objeto anterior la propiedad start, en la cual indicamos para cada uno de los elementos del array los cambios (efectos) que queremos incorporar. Esto lo hacemos de la siguiente manera:

miefecto.start({
0:{width: 100,background-color:"#f00"},
1:{width: 200,background-color:"#0f0"},
2:{width: 200,background-color:"#00f"}
});

Explicamos el argumento que hemos puesto al método start().

Como es habitual para poner una serie de opciones, ponemos todo el argumento entre llaves. En cada opción tenemos en primer lugar el número que ocupa el elemento en el array; y en segundo lugar (después de los dos puntos), ponemos otra serie de opciones con los pares propiedad:"valor" de las propiedades CSS que queremos cambiar en cada elemento. El valor que ponemos es el valor final que tendrá la propiedad en ese elemento tras la transición.

No es necesario poner todos los elementos del array, sólo aquellos en los que queramos cambiar alguna propiedad.

Ejemplo de efecto con Fx.Elements()

Vamos a realizar un efecto con Fx.Elements en el que ampliamos el ancho de cuatro elementos, a la vez que les cambiamos de color de fondo. En principio ponemos el siguiente código html:

<div id="caja1">
<p></p> <p></p> <p></p> <p></p>
</div>
<p><button id="boton1">Realizar efecto</button></p>
<p><button id="boton2">Deshacer efecto</button></p>

Dentro de un elemento ponemos cuatro párrafos, que son los que utilizaremos para el efecto. Debajo hemos puesto dos botones, el primero para lanzar el efecto, y el segundo para restablecer los elementos a su estado original.

Hemos puesto también el siguiente código CSS inicial:

#caja1 { height: 90px; border: 1px solid black; width: 90%; margin: 5px 5%; overflow: auto; }
#caja1 p { height: 15px; background-color: grey; margin:5px; width: 1px; padding: 0;  }

Vemos a continuación el efecto, y después explicaremos el código con mootools/javascript que hemos aplicado:

Realizar efecto

Deshacer efecto

Recordar que todo el código debe ir dentro de la estructura "domready", y también que tenemos que tener cargados los archivos "core" y "more" de mootools. En primer lugar instanciamos el objeto Fx.Element():

efecto1=new Fx.Elements($$("#caja1 p"),{
   duration: 1500,
   transition: "bounce:out"
});

Como primer argumento hemos pasado el "Element", con los párrafos que queremos variar, y como segundo las opciones de Fx para el efecto.

Después llamamos al método start indicando en cada elemento las propiedades y valores CSS que queremos variar. Esto lo hacemos dentro del evento generado al pulsar el primer botón:

$("boton1").addEvent("click",function(){
   efecto1.start({
      0:{width:150,backgroundColor:"#f00"},
      1:{width:300,backgroundColor:"#ff0"},
      2:{width:450,backgroundColor:"#0f0"},
      3:{width:600,backgroundColor:"#00f"},
   });
})

Hasta aquí hemos completado el código para realizar el efecto. Sin embargo queremos también poner un segundo botón para deshacer el efecto y restablecer los elementos a su estado original.

Para ello no utilizaremos el objeto Fx.Elements sino Fx.Morph. Esto es debido a que todos los elementos (parrafos) tienen las mismas propiedades.

Sin embargo el objeto Fx.Morph no admite que se le pase como argumento un array, sino un elemento concreto. Es por eso que lo haremos mediante un bucle que recorre todos los elementos: el código es el siguiente:

$("boton2").addEvent("click",function(){
   for (i=0;i<4;i++){
      new Fx.Morph($$("#caja1 p")[i],{
         duration: 1500,
         transition: "bounce:out"
         }).start({
            "width":"1",
            "backgroundColor":"#888"
            });
      }
   });

Observa cómo dentro del bucle creamos un nuevo objeto para cada uno de los párrafos, y le encadenamos la propiedad start con los valores iniciales.

En la siguiente página seguimos viendo efectos de Fx en el archivo "more"

La clase Fx.Accordion()

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