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

Temas relacionados: Filtros Multimedia en IE

  1. Introducción
  2. Catálogo de Transiciones
    1. 2.1 Barn
    2. 2.2 Blinds
    3. 2.3 CheckerBoard
    4. 2.4 Fade
    5. 2.5 GradientWipe
    6. 2.6 Inset
    7. 2.7 Iris
    8. 2.8 Pixelate
    9. 2.9 RadialWipe
    10. 2.10 RandomBars
    11. 2.11 RandomDissolve
    12. 2.12 Slide
    13. 2.13 Spiral
    14. 2.14 Stretch
    15. 2.15 Strips: Muestra el nuevo objeto desplazando franjas sucesivas.
    16. 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. 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="ImageStrips" src="images/vela.gif"
      style="filter:progid:DXImageTransform.Microsoft.Strips(duration=4,motion=leftup)" />
      </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()
      {
      ImageStrips.filters.item(0).Apply();
      ImageStrips.src="images/chaplin.gif";
      ImageStrips.filters.item(0).Play();
      }

      Dónde ImageStrips 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.Strips(duration=4,motion=rightdown)" />

      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.Strips(duration=5,motion=leftdown)" />



      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
      • leftdown
      • leftup
      • rightdown
      • rightup
      Establece la esquina del objeto en la que se inicia la transición en tiras. leftdown
      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