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

La clase Fx.Scroll

Introducción

Cuando un elemento es mayor que la ventana en la que se visualiza normalmente, para poder verlo entero, aparecen unas barras de desplazamiento al lado derecho y en la parte inferior. Esto es lo que se conoce como Scroll. La clase Fx.Scroll permite mover el elemento sin usar las barras de desplazamiento, sino llevándolo al punto en el que le indiquemos, y además con un efecto de transición.

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

Instanciar el objeto

lo primero que debemos hacer para utilizar esta clase es instanciar un objeto, el cual se referirá a un elemento de la página:

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

Como primer argumento pasamos el elemento sobre el cual queremos aplicar el efecto. Como segundo argumento pasamos una serie de opciones, las cuales son las mismas que para cualquier objeto Fx, y además podemos poner la siguiente opción:

• offset : Indica el punto donde se toman las coordenadas de inicio del objeto para poder moverlo. como valor pasaremos las coordenadas de la siguiente forma {x:0 , y:0}. Aquí hemos puesto como punto de inicio las cordenadas 0,0 (valor por defecto), sin embargo podemos poner otros números que indicarán los píxeles de desplazamiento.

Métodos

Una vez instanciado el objeto, lo que nos permitirá moverlo son los métodos que le apliquemos. Tenemos los siguientes métodos:

.set(x,y)

Desplaza el elemento a las coordenadas indicadas, x e y serán dos números que indican las coordenadas. El desplazamiento se produce de forma inmediata y sin efecto de transición.

efecto.set(100,100);

.start(x,y)

Al igual que el anterior también desplaza el elemento a las coordenadas indicadas. La diferencia está en que aquí si que se produce efecto de transición.

efecto.start(100,100);

.toTop()

Desplaza el elemento para poder ver la parte superior del mismo.

efecto.toTop()

.toBottom()

Desplaza el elemento para poder ver la parte inferior del mismo.

efecto.toBottom()

.toLeft()

Desplaza el elemento para poder ver la parte izquierda del mismo.

efecto.toLeft()

.toRight()

Desplaza el elemento para poder ver la parte derecha del mismo.

efecto.toLeft()

.toElement($("subelemento"))

Aquí dentro del elemento deberá haber uno o más subelementos. El método desplaza al elemento hasta poder ver el subelemento indicado en el argumento.

efecto.toElement($("apartado1"))

Ejemplo con la clase Fx.Scroll

Veamos un ejemplo en el que ponemos una foto con un texto debajo, dentro de una caja que es más pequeña, lo que obliga a hacer scroll. Sin embargo el desplazamiento lo haremos a traves de unos botones en lugar de las barras de desplazamiento.

Ponemos en primer lugar el código HTML, en el cual incluimos dentro de un elemento una imagen y un texto. También ponemos los botones para poder manejar el desplazamiento del elemento.

<div id="caja1">
  <img src="../objetos/koala.jpg" alt="koala">
  <p id="texto">Los koalas viven en el este de Australia, donde hay más eucaliptos. 
     A los koalas les gustan tanto estos árboles que casi nunca los abandonan. 
     Además, gracias a sus extremidades y dedos oponibles se mantienen 
     cómodamente sobre ellos. </p>
</div>
<p><button id="boton1">Arriba</button> ...
   <button id="boton2">Abajo</button> ...
   <button id="boton3">Izquierda</button> ...
   <button id="boton4">Derecha</button> ...
   <button id="boton5">x=100,y=100</button> ...
   <button id="boton6">Texto</button>
</p>

Los botones se corresponden con los métodos vistos anteriormente, de forma que cada botón nos dará una posición diferente.

Ahora ponemos el código CSS. Con esto hacemos que la ventana que contiene la imagen y su texto sea más pequeña que lo que ocupan estos:

#caja1 { width: 30%; height: 200px; float: right; margin: 1em 3em 1em 1em; 
         background-color:#ceedff; overflow: hidden; padding: 0; }
#caja1 img { width: 400px; }
#caja1 p  { font: normal 12px verdana; width: 360px;
            margin: 0px; padding: 5px 20px; }

Hemos puesto al contenedor un overflow: hidden que hace que sólo podamos ver una parte del contenido, y además no tenga barras de desplazamiento.

Los koalas viven en el este de Australia, donde hay más eucaliptos. A los koalas les gustan tanto estos árboles que casi nunca los abandonan. Además, gracias a sus extremidades y dedos oponibles se mantienen cómodamente sobre ellos.

Arriba ... Abajo ... Izquierda ... Derecha ... x=100,y=100 ... Texto

Ahora vemos aquí a la derecha el resultado del ejemplo que estamos poniendo, ya en funcionamiento, con los botones que tenemos aquí arriba; sin embargo nos falta por hacer todavía el código javascript-mootools que es el que da el dinamismo.

En primer lugar, (siempre dentro del "domready"), instanciamos el objeto. Aquí le damos también una posición inicial mediante el método .set.

efecto=new Fx.Scroll($("caja1"),{
   duration: 800,
   transition:"quad:in:out"
   });
efecto.set(100,100);

Después asociamos a cada botón un método mediante el evento "click":

$("boton1").addEvent("click",function(){
   efecto.toTop();
   });
$("boton2").addEvent("click",function(){
   efecto.toBottom();
   });
$("boton3").addEvent("click",function(){
   efecto.toLeft();
   });
$("boton4").addEvent("click",function(){
   efecto.toRight();
   });
$("boton5").addEvent("click",function(){
   efecto.start(100,100);
   });
$("boton6").addEvent("click",function(){
   efecto.toElement($("texto"));
   });

Con esto ya tenemos completado el ejemplo, que funcionará tal como vemos aquí arriba.

En la siguiente página vemos el efecto "slide" que muestra um oculta un elemento haciendo un efecto de deslizamiento.

La clase Fx.Slide()

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