Transiciones en IE mediante CSS: Blinds

Temas relacionados: Filtros Multimedia en IE

1. Introducción
2. Catálogo de Transiciones
1. 2.1 Barn
2. 2.2 Blinds: Descubre el objeto con un efecto apertura de persiana. Veamos el siguiente ejemplo:

Abrir popup   | Cerrar popup







Utilizaremos 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="ImageBlinds" src="images/vela.gif" style="filter:progid:DXImageTransform.Microsoft.Blinds(duration=3,bands=12)" /> </div> Y en la hoja de estilo asociada se le asigna una regla al contenedor de la imágen en la que display: none: 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() { ImageBlinds.filters.item(0).Apply(); ImageBlinds.src="images/chaplin.gif"; ImageBlinds.filters.item(0).Play(); } Dónde ImageBlinds 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 Blinds para la transformación de un objeto en otro diferente, se pueden aplicar este mismo tipo de transición durante la carga de una página en el navegador. Y de igual forma 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.Blinds(duration=4,bands=12,direction=up )" /> 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.Blinds(duration=4,bands=22,direction=left )" />





Atributos / Propiedades

Atributo / Propiedad	Valores	Descripción	Por defecto
enabled	true false	Determina si el filtro está habilitado.	true
duration	> 0 (segundos)	Establece la duración de la transición hasta que termina.
bands	1 ... 100 (entero)	Especifica el número de franjas que se van a aplicar al objeto durante la transición.	10
direction	up down left right	Establece la dirección de la transición.	down
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