Entendido.

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

Logo

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

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net
docs/more/ página oficial mootools
mootools.net

Donativos

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




MooTools2 (I)

Efectos simples con MooTools

imagen mootools
Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 25

Visitas el mes pasado: 37

Introducción

En la primera parte del manual hemos visto la manera de hacer con mootools las mismas acciones habituales que se hacen con javascript. En esta segunda parte veremos cómo realizar acciones que con javascript resultarían más complejas. Mootools tiene objetos y métodos específicos para realizar acciones que suelen ser habituales en las páginas web, y que con javascript nos llevarían bastante trabajo.


La clase Fx

Fx es una clase de objetos de mootools que se utiliza para realizar efectos especiales con los elementos de la página. Lo más destacado de esta clase son los cambios graduales de los elementos de un estado a otro, aunque no son lo único.

En esta segunda parte del manual de MooTools veremos lo que podemos hacer con la clase Fx.

En esta página mostraremos unos efectos sencillos de la clase Fx. Decimos sencillos porque podemos aplicarlos directamente sobre los elementos, es decir sobre los objetos de la clase Element

Para realizar los efectos que describimos en esta página basta con cargar el archivo "core" de mootools.


Efecto fade

Este efecto consiste en hacer que el elemento pase de un estado opaco a un estado transparente (o semi-transparente) de una manera gradual. Su aplicación es muy sencilla, ya que sólo tenemos que utilizar el método .fade() sobre el elemento.

$("elemento").fade("out");

Los argumentos que puede tener el método .fade() son los siguientes:

  • "out" : El elemento pasa a ser totalmente transparente de forma gradual.
  • "in" : El elemento pasa a ser totalmente opaco de forma gradual.
  • "toggle" : Si el elemento está visible, pasa a invisible, y si está invisible, pasa a visible; todo ello de forma gradual.
  • "show" : El elemento pasa a ser totalmente opaco pero instantaneamente, sin graduación.
  • "hide" : El elemento pasa a ser totalmente transparente pero instantaneamente, sin graduación.
  • num : Podemos poner un número que indique el grado de transparencia que tendrá el elemento. Este número es un decimal comprendido entre 0 y 1, siendo 0 la transparencia total y 1 la opacidad total. El cambio ocurrirá gradualmente.

Tenemos aquí a la derecha un ejemplo en el que hemos utilizado el método fade():

capa 1

.. // ..

En el código HTML hemos puesto un elemento para mostrar el efecto y dos botones:

<div id="capa1"><h2>capa 1</h2></div>
<p><button id="boton1">Semitransparente</button> .. // ..
<button id="boton2">Ver/Ocultar</button></p>

Luego en javascript/mootools (dentro del "domready") ponemos el siguiente código:

$("boton1").addEvent("click",function(){
$("capa1").fade(0.5);
});
$("boton2").addEvent("click",function(){
$("capa1").fade("toggle");
});


el método highlight()

Este método produce un cambio gradual del color de fondo en el elemento desde su color actual a otro que le indicamos, para volver después también gradualmente a su color original. Podemos indicar hasta dos colores para el cambio:

$("capa2").highlight("#00f","#ff0")

Podemos pasarle uno o dos argumentos, que serán el color o colores que queremos que aparezcan en el efecto. Al acabar el efecto, el elemento vuelve a su color de fondo original.

Vemos aquí a la derecha un ejemplo en el que hemos utilizado el método highlight():

Capa 2

En el código html hemos puesto un elemento que recoge el efecto, y un botón para producirlo mediante un "click" :

<div id="capa2"><h2>Capa 2</h2></div>
<p><button id="boton3">Efecto color</button></p>

Luego mediante el código javascript/mootools hacemos funcionar el botón y el efecto:

$("boton3").addEvent("click",function(){
$("capa2").highlight("#00f","#ff0");
});


El método tween()

El método tween() cambia el estado de una propiedad CSS del elemento, a ser posible de forma gradual. Recibe para ello tres argumentos, el primero es el nombre de la propiedad CSS, el segundo el valor inicial, y el tercero el valor final.

$("capa3").tween("background-color","#ff0","#00f");

Capa 3

En este ejemplo se cambia el valor de la propiedad background-color del color azul al amarillo, y del amarillo al azul al volver a pulsar en el botón. El cambio de color se producirá gradualmente.

Para la realización de este ejemplo hemos utilizado el siguiente código en html:

<div id="capa3"><h2>Capa 3</h2></div>
<p><button id="boton4"> Azul/Amarillo </button></p>

En javascript/mootools hemos utilizado el siguiente código:

$("boton4").addEvent("click",function(){
  mifondo=this.getStyle("background-color");
  if (mifondo=="#0000ff") {
     this.tween("background-color","#0000ff","#ffff00");
     $("boton4").set("html","Amarillo/Azul");
     }
  else {
     this.tween("background-color","#ffff00","#0000ff");
     $("boton4").set("html","Azul/Amarillo");
     }
  }.bind($("capa3")));

Comprobamos mediante el método getStyle cuál es el color de fondo del elemento. Con una estructura "if/else" cambiamos con el método tween el color del elemento. También cambiamos el texto del botón (método set). Hemos usado también el método bind, para poder referirnos al elemento como this.

Aquí hemos utilizado el método tween() para variar el color de fondo de un elemento. El uso de este método puede ser más amplio, ya que podemos usarlo con cualquier propiedad CSS. El cambio gradual se realizará solamente con las propiedades CSS que tengan como valor un número (medidas, colores, porcentajes). Con propiedades que no tengan como valor números el método no tiene efecto y el cambio se realiza de forma instantánea.


Limitaciones de los efectos simples

Los efectos simples vistos en esta página tienen como ventaja que se consiguen de una forma rápida y poco complicada.

Como inconvenientes vemos que no podemos controlar el tiempo que tarda en hacerse el cambio gradual, ni la forma. Hay además otra serie de acciones que no podemos hacer con los efectos simples. En páginas posteriores veremos otra serie de efectos que resuelven estos problemas.





En la siguiente página veremos cómo crear y trabajar con el objeto Fx, y sus subclases, lo cual nos amplia las posibilidades de crear efectos especiales.

La clase Fx.tween



Manual de Mootools (II Efectos)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com