Reproduciendo Parallax

26/may/2008 11

El efecto Parallax es una técnica que consiste en aplicar el efecto de profundidad a través de capas, utlizando principalmente CSS. Con esto podemos simular un pseudo-3D dentro de un escenario. Esta técnica es prácticamente la misma utilizada en los juegos 2D donde el personaje se mueve por su mundo (Sonic, Mario, etc) y el fondo se mueve en diferentes velocidades, simulando profundidad.

Esta es una técnica muy limitante, ya que se necesita mucha creatividad para encontrar un uso práctico que impacte al usuario y que principalmente no sea un estorbo en la navegación del sitio. Otro punto importante es que lo más probable necesiten hacerlo con PNG transparente, lo que hace que IE6 sea excluído (salvo utilicen algun buen filtro de PNG para él). Un par de gradiosos ejemplos lo encontramos en el sitio de Silverback y de We all hate quick books.

En este artículo les mostraré cómo se realiza, y lo más probable es que se hagan la misma pregunta que yo me hice: ¿porqué #&œ¥Ω no se me ocurrió a mí antes?

Parallax no es muy amigable, ya que a primera vista no se nota. Se necesita mover la ventana del browser para recién notar el efecto. Primero les presento el ejemplo final, para que puedan apreciar lo que haremos. Si modifican el tamaño de su ventana podrán notar de qué les estoy hablando

Ver ejemplo final

Primero necesitamos de las imágenes que formarán nuestras capas. Cuiden de prepararlas cosa que el final y el principio calcen perfectamente; en mi caso con 3 capas necesité montañas, árboles y unas ramas desenfocadas como se muestran en el siguiente diagrama:

CSSLab: Diagrama de Parallax

Luego, el HTML. Básicamente se compone de (en mi caso) 3 div‘s, uno para cada capa (cada capa anidado en otra):

<div id="montanas">
     <div id="arboles">
          <div id="hojas">
          </div>
     </div>
</div>

El <div> #montanas será el que se despliegue más atrás; así #hojas será el que esté más adelante y el que se moverá más rápido que las otras.

El CSS es muy simple. El efecto se logra con un juego de porcentajes: mientras agregamos las imágenes de fondo de los div‘s mediante background-image, posicionamos cada capa (con background-position) con porcentajes horizontales: mientras las montañas se ubican a 30% de la izquierda, las hojas estarán a 70% lo que hará que se muevan en diferentes velocidades si la ventana se mueve. Este juego de porcentajes es toda la técnica, el resto será vil posicionamiento absoluto (para que los elementos estén a 100% alto y ancho, y se ubiquen en el extremo inferior del browser):

#montanas {
     background: url(images/montanas.png) 30% bottom repeat-x;
     position: absolute;
     height: 100%;
     width: 100%
}
#arboles {
     background: url(images/arboles.png) 50% bottom repeat-x;
     position: absolute;
     height: 100%;
     width: 100%
}
#hojas {
     background: url(images/hojas.png) 70% bottom repeat-x;
     position: absolute;
     height: 100%;
     width: 100%
}

Ver nuevamente ejemplo final

Comentarios

  1. Galeria de Efeitos Parallax » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards [#]

    […] site CSSLab.cl fez um post interessante sobre o assunto […]

  2. fearlex [#]

    Wow !!!, Creo que esta super, pero no le veo la funcionalidad, como dices, no es muy amigable, casi siempre tenga la ventana totalmente maximizadas, so de seguro, me hubiera perdido efecto de no ser por que lo mencionastes.

    De todas formas muy bueno saberlo. Gracias 😀

  3. Jorge Epuñan [#]

    fearlex, en este sitio ruso lo utilizaron muy sutilmente y con mucho impacto segun mi opinion. salu2.

  4. Efecto Parallax en el fondo de una web » Cosas sencillas [#]

    […] el blog CSSLAB, descubro lo que es llamado como el efecto Parallax, una técnica que consiste en aplicar el efecto […]

  5. CSSLab » Parallax en uso real [#]

    […] del anterior artículo develando cómo se realiza el efecto Parallax con CSS, surgieron dudas de su real aplicación en proyectos web. Así como se presentó […]

  6. Reproduciendo Parallax — Tablosign [#]

    […] lo que es el efecto Parallax? En la cinematografía se ve mucho este interesante efecto y éste y éste tutorial podremos ver como desarrollar o implementarlos en nuestros diseños web. 0 […]

  7. fearlex [#]

    Considero que el efecto, esta super, pero como que es un extra al por si se deciden a achicar o agrandar la ventana. Gracias, siempre nos traes cosas nuevas 😀

  8. Felipe [#]

    ajajaja ami se me habia ocurrido pero llegue a el por un accidente en una css que estaba haciendo hace años.

    Es exelente pero hay que saber donde ocuparlo :)

  9. xuunami [#]

    Saludos. A algunos podra parecerle poco funcional, pero es bastante interesante. De hecho aplicando un poco de JS se consigue un efecto por demas excelente de movimiento que aparenta 3D. Dejo unas paginas de ejemplo, yo aun estoy intentando aprenderlo. Gracias por el aporte. http://webdev.stephband.info/parallax_demos.html

  10. A imersão do efeito Parallax | Agni.art [#]

    […] Reproduciendo Parallax […]

  11. A imersão do efeito Parallax | UX.BLOG [#]

    […] Reproduciendo Parallax […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab