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 (IX)

La clase Fx.Reveal

Introducción

La clase Fx.Reveal permite hacer aparecer o desaparecer un elemento de forma progresiva.

Al aparecer el elemento este lo puede hacer de arriba a abajo, de izquierda a derecha o ambas opciones a la vez. Además tenemos la opción de que al mismo tiempo que aparece tiene una transición de transparente a opaco.

Para que funcione esta clase debemos cargar los archivos "core" y more" de mootools.

Instanciar el objeto

Tal como hemos hecho con los objetos anteriores, el primer paso es instanciar el objeto, de la siguiente manera:

efecto=new Fx.Reveal($("elemento"),{[opciones]});

Dentro de las opciones podemos poner todas las opciones de la clase Fx.Morph y además las siguientes opciones específicas de este objeto.

• transitionOpacity : Valores booleanos true (por defecto) o false. Permite que durante la transicion haya o no un efecto de transparencia a opacidad.
• mode : Indica el modo en que se abre el elemento. sus posibles valores son las cadenas: "vertical" (apertura de arriba hacia abajo), "horizontal" (apertura de izquierda a derecha), o "both" (ambas formas a la vez). El valor por defecto es "vertical".
• heightOverride : el valor es un número que indica el número de píxels de alto que tendrá el elemento después de abrirse.
• widthOverride : el valor es un número que indica el número de píxels de ancho que tendrá el elemento después de abrirse.
• display : el valor es una cadena de texto que indica el estilo en la pantalla del elemento al abrirse. Los valores que se admiten son los mismos que la propiedad "display" de CSS. El valor por defecto es "block".
• opacity : valor númerico (decimal) entre 0 y 1, que indica el grado de opacidad final del elemento después de abrirse (0=transparencia, 1= opacidad total).

Veamos un ejemplo en el que instanciamos un objeto:

efecto=new Fx.Reveal($("capa1"),{ 
   duration: 1500,
   transition: "bounce:out",
   mode: "vertical"
   });

Métodos del objeto

Los métodos son los que nos permiten realizar el efecto; ya que son los que ocultan o visualizan el objeto. Estos son:

dissolve() : Hace desaparecer el elemento:

efecto.disolve()

reveal() : Hace aparecer el elemento progresivamente:

efecto.reveal()

podemos ponerle opcionalmente un argumento con opciones del objeto (estas irán entre llaves).

toggle() : el elemento aparece o desaparece cambiando de estado. Opcionalmente también puede llevar como argumento las opciones de Fx.Reveal

efecto.toggle()

Ejemplo de efecto Fx.Reveal

Vamos a probar el efecto haciendo un ejemplo en el que pondremos botones para utilizar los métodos vistos anteriormente. El primer paso es ver el código HTML:

<div id="caja1">
  <div id="capa1">
    <h2>El efecto Reveal</h2>
    <p>El efecto reveal permite hacer aparecer o desaparecer progresivamente un elemento.</p>
  </div>
</div>
<p><button id="boton1">Ocultar</button> ...
   <button id="boton2">Ver</button> ...
   <button id="boton3">Ver/Ocultar</button>
</p>

Encerramos todo dentro de una caja (caja1) a la que le daremos unas medidas fijas. El elemento que aparece y desaparece es el id="capa1". Luego ponemos los botones para aplicar los métodos.

El siguiente paso es crear el código CSS asociado a los elementos anteriores. Esto permite darles tamaño y estilo:

#caja1 { width: 300px; height: 250px; border: 3px double red;float: right; 
         margin: 1em 3em 1em 1em; }
#capa1 { margin: 25px; background-color: #ff9; width: 250px; height: 200px; }
#capa1 h2 { font: bold 18px helvetica; text-align: center; padding: 3px; color: navy }
#capa1 p { font-size: 14px; text-align: left; margin: 0px; padding: 3px; }

Ocultar ... Ver ... Ver/Ocultar

Mostramos aquí a la derecha el ejemplo ya en marcha, sin embargo todavía nos falta ver el código javascript-mootools que hace que funcione. En primer lugar instanciamos el objeto:

efecto=new Fx.Reveal($("capa1"),{ 
   duration: 1500,
   transition: "bounce:out",
   mode: "vertical"
   });

Después aplicamos el evento "click" a los botones, y en cada uno de ellos aplicamos un método del objeto anterior:

$("boton1").addEvent("click",function(){
   efecto.dissolve();
});
$("boton2").addEvent("click",function(){
   efecto.reveal();
});
$("boton3").addEvent("click",function(){
   efecto.toggle();
});

Aplicar sobre "Element"

La clase Fx.Reveal tiene una serie de métodos que podemos aplicar directamente sobre un elemento. Estos son:

$("elemento").reveal()

Hace aparecer el elemento seleccionado (se supone que estaba previamente oculto). Como argumento se le pueden pasar las opciones de Fx.Reveal().

$("elemento").dissolve()

Oculta el elemento seleccionado. No se le pasan argumentos.

$("elemento").nix()

Borra o elimina totalmente el elemento especificado. Podemos pasar opcionalmente dos argumentos, uno son las opciones de Fx.Reveal, y el segundo un booleano true, que indica que la eliminación es total, o false, (por defecto) que indica que el elemento no se elimina del DOM y se puede recuperar.

$("elemento").wink()

Este método produce en el elemento varios efectos seguidos. En primer lugar el elemento aparece, después se mantiene visible un tiempo (por defecto 2000 ms), para despúes volver a ocultarse. Como argumento podemos pasar un número que indica los milisegundos que el elemento estará visible (2000 por defecto).

En la siguiente página vemos el efecto "scroll" que puede usarse como un método alternativo a las barras de desplazamiento.

La clase Fx.Scroll()

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