Transiciones en IE mediante CSS: Barn

Temas relacionados: Filtros Multimedia en IE

1. Introducción:

Las transiciones son filtros variables en el tiempo que afectan a la forma en que se muestra el contenido en una página web. El paso de una situación a otra se producirá así con un efecto de animación.

Mediante CSS's y código Javascript se pueden establecer un cierto número de Transiciones multimedia que se aplicarán en la renderización de objetos por el navegador aportando un interesante atractivo a la página que los contiene. Funcionan en Internet Explorer, para versiones del navegador mayores que la 5.5.

Las transiciones utilizan métodos y eventos para gestionar los efectos:

Métodos usuales:
• El método apply toma una instantánea de la apariencia de un objeto al que se le aplica una transición
• El método play ejecuta una transición
• El método stop detiene la ejecución de una transición


Gestores de eventos usuales:
• El método onMouseover, onClick para lanzar la transformación de un objeto
• El método onLoad para lanzar la la carga de una página bajo una determinada transición
• El método onfilterchange que captura la finalización de una transición
2. Catálogo de Transiciones:

A continuación describimos los 17 tipos de Transiciones que existen para IE y damos de cada caso un ejemplo de su efecto sobre una imágen y de su efecto sobre un elemento HTML.

Finalmente describimos el código CSS / Javascript necesario para implementar cada filtro.

1. 2.1 Barn: Descubre el objeto con un efecto de apertura / cierre de puerta.

Abrir popup   | Cerrar popup





Utilizaremos un cierto código javascript dentro del fichero externo popupWindow.js para cargar la imágen en una capa manejando su visibilidad (regla display). De por si esto no tiene nada que ver con la transición, sino sólo con el lanzamiento del popup que contendrá la imágen: var popUp = document.getElementById("popupWindow"); var baseText = null; function showPopup(w,h) { var popUp = document.getElementById("popupWindow"); popUp.style.top = "0px"; popUp.style.left = "40px"; popUp.style.width = w + "px"; popUp.style.height = h + "px"; if (baseText == null) baseText = popUp.innerHTML; popUp.innerHTML = baseText + "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Cerrar ventana</button></div>"; var sbar = document.getElementById("statusbar"); sbar.style.marginTop = (parseInt(h)-40) + "px"; popUp.style.display = "block"; } function hidePopup() { var popUp = document.getElementById("popupWindow"); popUp.style.display = "none"; } La imágen que sufrirá la transformación estará en un contenedor al que se aplica la regla de estilo que producirá la transición a la imágen final:: <div id="popupWindow"> <img id="ImageBarn" src="images/vela.gif" style="filter:progid:DXImageTransform.Microsoft.Barn(duration=3)" /> </div> Y en la hoja de estilo asociada se le asigna una regla al contenedor de la imágen en la que display: none: #popupWindow { position: relative;display: none;overflow: hidden;border:1px solid #CCC;background-color:#F9F9F9;border:1px solid #333;padding:6px; } El código javascript (área head de la página) que manejará la transición será el siguiente: <script language="Javascript"> function startTransition() { ImageBarn.filters.item(0).Apply(); ImageBarn.src="images/chaplin.gif"; ImageBarn.filters.item(0).Play(); } Dónde ImageBarn es el id de lá imágen a la que se aplicará la transición. Finalmente, el código Html / Javascript para abrir el popup con la transición y cerrarlo es el siguiente: <a href="javascript:void(null)" onClick="showPopup(78,205);startTransition()"> Abrir popup</a>   | <a href="javascript:void(null)" onClick="hidePopup('popupWindow');" > Cerrar popup</a> Dónde utilizaremos la sencilla función Javascript hidePopup para cerrar el layer cuando lo deseemos: function hidePopup() { var popUp = document.getElementById("popupWindow"); popUp.style.display = "none"; }

Transiciones entre páginas: de forma similar a como se aplica una transición en la carga de un objeto, se pueden aplicar transición durante la carga de una página en el navegador. Y también al abandonar dicha página.

Abrir página

(Una vez en la página demo, utiliza el botón "← Atrás" del navegador para volver a esta página)

El código que realizará la transición reside en un tag meta de la página que se va a abrir, el cual se incluírá en el área head de la página. Que se lance la transición estará controlado por el evento page-enter: <meta http-equiv="Page-Enter" content=" progid:DXImageTransform.Microsoft.Barn(duration=4,motion=out,orientation=horizontal )" /> Y si lo que se desea es aplicar una transición al abandonar la página, utilizaremos otro tag Meta pero esta vez controlando el evento page-exit: <meta http-equiv="Page-Exit" content=" progid:DXImageTransform.Microsoft.Barn(duration=4,motion=in,orientation=vertical )" />





Atributos / Propiedades

Atributo / Propiedad	Valores	Descripción	Por defecto
enabled	true false	Determina si el filtro está habilitado.	true
duration	> 0 (segundos) (coma flotante)	Establece la duración de la transición hasta que termina.
motion	in out	Define si el contenido empieza a desvelarse desde el exterior ( out) o desde el interior ( in).	out
orientation	vertical horizontal	Define si el efecto de la transición es vertical u horizontal.	vertical
percent	0 ... 100 (Porcentaje implícito)	Establece el punto en el que capturar la visualización del contenido para aplicarle la transición. (Sólo aplicable mediante scripting)	0
status	0 (transición detenida) 1 (transición aplicada correctamente) 2 (transición ejecutándose)	Devuelve el estado en curso de la transición. (Sólo aplicable mediante scripting).

Transiciones:

Barn	Blinds	CheckerBoard	Fade	GradientWipe	Inset
Iris	Pixelate	RadialWipe	RandomBars	RandomDissolve	Slide
Spiral	Stretch	Strips	Wheel	Zigzag

Temas relacionados: Filtros Multimedia en IE