Efectos de transición

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:

líneas múltiples verticales líneas múltiples horizontales 2 líneas verticales 2 líneas horizontales
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:

<style>

</style>

"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:

<script language="JavaScript1.2">
var speed=20
var temp=new Array()
var temp2=new Array()
if (document.layers){
for (i=1;i<=2;i++){
temp[i]=eval("document.i"+i+".clip")
temp2[i]=eval("document.i"+i)
temp[i].width=window.innerWidth/2
temp[i].height=window.innerHeight
temp2[i].left=(i-1)*temp[i].width
}
}
else if (document.all){
var clipright=document.body.clientWidth/2,clipleft=0
for (i=1;i<=2;i++){
temp[i]=eval("document.all.i"+i+".style")
temp[i].width=document.body.clientWidth/2
temp[i].height=document.body.offsetHeight
temp[i].left=(i-1)*parseInt(temp[i].width)
}
}
function openit(){
window.scrollTo(0,0)
if (document.layers){
temp[1].right-=speed
temp[2].left+=speed
if (temp[2].left>window.innerWidth/2)
clearInterval(stopit)
}
else if (document.all){
clipright-=speed
temp[1].clip="rect(0 "+clipright+" auto 0)"
clipleft+=speed
temp[2].clip="rect(0 auto auto "+clipleft+")"
if (clipright<=0)
clearInterval(stopit)
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()
</script>

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.

Autor: Massimiliano Valente
http://www.htmlpoint.com/dhtml/18/index.html

Usuarios que han visto este tema también han visto...

- Efectos en el background en DHTML
- Objetos Tabs
- Efecto cortina con DHTML
- Conceptos de Arrastrar (Drag) y Soltar (Drop)
- Reloj DHTML, con Javascript y capas

- Versión imprimible de este documento

- Enviar por e-mail este documento