Guía para diseñadores gráficos

Guía para diseñadores gráficos > Adaptación de la estructura... > Ejemplos: páginas web sensibles > Ejemplo 5

Ejemplos: páginas web sensibles

http://www.designmadeingermany.de/magazin/5

 

NOTA: Todos las medidas en pixeles son aproximadas. Algunas medidas pueden ser diferentes si el usuario amplia o disminuye el tamaño de la tipografía con Ctrl+ o Ctrl- .

Este ejemplo no se va a utilizar para estudiar cómo se adaptan los bloques en función de la resolución de la pantalla, aunque el web se adapta perfectamente. Este ejemplo nos será útil para ver los posibles comportamientos de los bloques en función de nuestra posición en la página (o del scroll o de la barra de desplazamiento):

Si nos desplazamos hacía abajo, vemos que algunos bloques se mantienen fijos en la pantalla (barra amarilla y el dibujo de los cuatro animales), mientras algunos bloques se mantienen fijos en la estructura web, es decir se desplazan arriba si consultamos la página más abajo (texto "Dmig" y "5"). El bloque "Dmig" se presenta por debajo del bloque de los animales y el bloque "5" encima, creando un interesante efecto:

A medida que vamos bajando por el contenido de la página, otro bloque se va presentando por encima de los animales (parece que se presente por debajo por su color más oscuro). Algunos de estos bloques que se presentan por encima son fijos a la estructura mientras otros son fijos a la pantalla (los animales de fondo montados unos encima los otros):

Bajando más abajo, la imagen de los animales montados se vuelve clara, indicando que los anteriores bloques de texto tenían una transparencia aplicada:

JAVAJAN [somos maquetadores y programadores web]. Webs for designers & you. www.javajan.com © 2012 | Avís legal
TwitterFacebookRSSe-mail