HTMLpointHTMLpoint HTMLpoint.com


 Efectos de transición  

 por Massimiliano Valente

Hasta ahora hemos examinado ejemplos en los que los efectos se producen cuando el navegador ha cargado el documento completamente. Una de las peculiaridades introducidas en la versión 4 de Internet Explorer es la posibilidad, mediante simples marcas del tipo:

<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=2)">

de generar efectos diversos de visualización tanto cuando entramos en un documento como cuando salimos de él. Se trata de una tecnología compatible exclusivamente con el navegador Microsoft y no con Netscape. Es posible obtener un efecto similar para ambos tipos de navegadores usando algunas estratagemas técnicas que ttoman prestado código normalmente destinado a producir otros efectos. En particular, se trata de un uso conjunto de hojas de estilo y código Javascript, mediante el cual se crean visualizaciones progresivas de la página con cinco efectos diferentes:

  1. líneas múltiples verticales
  2. líneas múltiples horizontales
  3. 2 líneas verticales
  4. 2 líneas horizontales
  5. visualización progresiva
El código necesario para generar estos efectos es común a todos los ejemplos, distinguiéndose sólo por los valores de impostación.

Antes de nada, hay que impostar la hoja de estilo dentro de las marcas BODY:


"layer-background-color:yellow" establece el color para la visualización progresiva con Netscape, y "background-color; yellow" con MsIE. En otras palabras, al abrir la página el fondo aparece completamente amarillo para dejar después progresivamente espacio al texto del documento propiamente dicho. Para impostar un color de fondo diveros del amarillo, basta sustituir el valor "yellow" con el nombre de otro color o, en alternativa, con un valor hexadecimal (p.ej., #FFFF00).

La impostación de la hoja de estilo, salvo por lo que se refiere al color de fondo, es la misma para los cinco ejemplos. Asimismo, en gran parte, la impostación sucesiva del código Javascript no varía de uno a otro. El código que hay que insertar en el cuerpo del documento es:

Muestra el ejemplo práctico


La velocidad de visualización queda regulada por la línea:

var speed=20

A valores más altos corresponden mayores aumentos de velocidad.

El objeto "all" representa el conjunto de todos los elementos del documento y es accesible sólo para Internet Explorer. En el Document Object Model (DOM) previsto por Netscape, los eventos están limitados a objetos específicos, en nuestro ejemplo representados por los layer. Esta diversa interpretación del DOM por MsIE y Netscape justifica la presencia de distinto código:

if (document.layers)

para el acceso a los objetos de Netscape. Y:

else if (document.all)

para el acceso a todos los objetos del documento de Internet Explorer.

En otras palabras, el navegador de Redmond tiene acceso a todos los elementos, incluidos color, fondo y fuente.

Para concluir el análisis del código, deberemos insertar las siguientes líneas que invocan las funciones impostadas previamente:

<div id="i1" class="intro"></div>
<div id="i2" class="intro"></div>

El ejemplo considerado hasta ahora genera una visualización progresiva en sentido horizontal. Para obtener otros resultados y modificar dirección, número y tamaño de los fotogramas, es necesario actuar de vez en vez en los valores del script. En el cd-rom que se adjunta a la revista encontrarás cuatro ejemplos prácticos.

  Vuelve a principio de página