Morton 20 de mayo de 2012 a las 15.42
   Imprimir artículo
elWebmaster.com

CSS3: C贸mo animar tu sitio web al cambiar la orientaci贸n del dispositivo m贸vil


css3wide1No se puede dudar de la eficiencia de las animaciones CSS, sobre todo porque pueden utilizar aceleraci贸n de hardware, no requieren de una sobrecarga de JavaScript, y requieren muy poco c贸digo. En este art铆culo te mostraremos como animar la redimensi贸n de las ventanas y el cambio de orientaci贸n de un dispositivo movil.

Haz clic aqu铆 para ver una demostraci贸n >>

La sintaxis para crear estas animaciones y transiciones son las mismas entre consultas media como lo son entre estados de elementos.

  1. #layout {
  2.   position: relative;
  3.   width: 900px;
  4.   border: 1px solid #ccc;
  5.   height: 200px;
  6.  
  7.   -webkit-transition: width 2s;
  8.   -moz-transition: width 2s;
  9.   -ms-transition: width 2s;
  10. }
  11. .child {
  12.   top: 0;
  13.   bottom: 0;
  14.   width: 290px;
  15.   position: absolute;
  16.   opacity: 1;
  17.   font-size: 20px;
  18.   overflow: hidden;
  19.   -webkit-transform: translate3d(0, 0, 0);
  20.  
  21.     -webkit-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
  22.   -moz-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
  23.   -ms-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
  24. }
  25.   #child1 { left: 0; background: lightblue; }
  26.   #child2 { left: 300px; background: lightgreen; }
  27.   #child3 { left: 600px; background: lightyellow; }
  28.  
  29. @media screen and (max-width: 860px) {
  30.   #layout { width: 600px; }
  31.   .child { width: 290px; font-size: 12px; }
  32.   #child1 { left: 0; background: blue; color: #fff; }
  33.   #child2 { left: 300px; background: green; color: #fff; }
  34.   #child3.child { /* hider */ opacity: 0; width: 0; }
  35. }

La creatividad es todo en las manos del desarrollador: animar consultas media no es dificil, pero el uso de las mismas es lo m谩s interesante. Algunos sitios sol铆an animar la posici贸n de los elementos de la estructura durante la redimensi贸n de la ventana, lo cual es interesante pero… 驴Cu谩nto uso se le da a 茅sto? Un uso m谩s realista es en dispositivos m贸viles, animando elementos cuando la orientaci贸n de la pantalla cambia:

  1. #sidebar {
  2.   -webkit-transition: opacity 2s;
  3.   width: 300px;
  4.   overflow: hidden;
  5. }
  6.  
  7.  
  8. @media screen and (orientation:portrait) {
  9.     #sidebar {
  10.     opacity: 0;
  11.     width: 0;
  12.   }
  13. }
  14.  
  15. @media screen and (orientation:landscape) {
  16.    #sidebar {
  17.     opacity: 1;
  18.   }
  19. }

Esta animaci贸n se dispara cuando el dispositivo pasa de una orientaci贸n vertical a una horizontal, y viceversa. Esto es increiblemente 煤til cuando escondemos un panel en la vista vertical pero queremos mostrarlo en la vista horizontal de forma elegante.

Haz clic aqu铆 para ver una demostraci贸n >>

Esto es todo 隆Esperamos que les sea de utilidad!

Fuente original del art铆culo: David Walsh Blog
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder