Página Inicial de WebUsable

Página anterior Página Inicial de WebUsable Disminuir tamaño de letra Aumentar tamaño de letra Mapa de WebUsable Envía tus comentarios
 

 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:
    3. 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:
Transición Anterior Barn Blinds CheckerBoard Fade GradientWipe Inset Siguiente Transición
Iris Pixelate RadialWipe RandomBars RandomDissolve Slide
Spiral Stretch Strips Wheel Zigzag  

Temas relacionados: Filtros Multimedia en IE

 
 
WebUsable.com © Todos los derechos reservados.
Subir al inicio de página Página anterior Página Inicial de WebUsable Imprimir esta página Envía tus comentarios Recomienda esta página a un amigo Mapa de WebUsable