Parallax en uso real

Luego 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ó no tiene mucho sentido, y como mencioné, es difícil verlo aplicado sin que se note el efecto que produce (ya que el usuario no suele modificar el tamaño de la ventana de su browser). Así que para paliar esa frustración que surgió en los comentarios, me propuse inventar un método para verlo funcionando de acuerdo a la interacción del usuario con el sitio. Primero intenté con el movimiento del mouse sobre la superficie de la ventana (con lo que hice para el sitio de 2monos), pero no funcionó por problemas de posicionamiento relativo de los elementos. Luego, pensé en movimiento horizontal mediante anclas; algo que ya había utilizado en otras ocasiones anteriores. Felizmente logré integrarlo a través del grandioso Mootools.

Ver ejemplo

En esta ocasión utilicé bastantes más capas que en el ejemplo original (6 en total… un poco exagerado ya que los PNG‘s pesan bastante), pero el HTML fue construído de igual manera:

<div id="nube">
   <div id="montanas">
      <div id="ciudad">
         <div id="personas">
            <div id="persona1">
               <img src="imgs/persona1.png" width="280" height="280">
               <p>Nulla facilisi. In vel sem...</p>
            </div>
            <div id="persona2">
               <img src="imgs/persona2.png" width="280" height="280">
               <p>Aliquam et nisl vel ligula...</p>
            </div>
            <div id="persona3">
               <img src="imgs/persona3.png" width="280" height="280">
               <p>Nunc auctor bibendum eros....</p>
            </div>
         </div>
         <div id="enredadera">
            <div id="hojas">
            </div>
         </div>
      </div>
   </div>
</div>

Y el CSS:

#nube, #montanas, #ciudad, #enredadera, #hojas, #personas {
   position: absolute;
   height: 100%;
   width: 200%;
   left: -150px;
}

Un detalle importante fue ampliar bastante el ancho de todas las cajas para que puedan soportar un desplazamiento horizontal contínuo (cuidando siempre que sea en porcentaje; así se conserva el efecto Parallax). Cada imagen es aplicada como background y posicionada horizontalmente en porcentaje y verticalmente de acuerdo a su ubicación (top ó bottom).

#nube {
   background: url(../imgs/nube.png) 20% top repeat-x;
  }
  #montanas {
   background: url(../imgs/montanas.png) 10% bottom repeat-x;
  }
  #ciudad {
   background: url(../imgs/ciudad.png) 30% bottom repeat-x;
  }
  #enredadera {
   background: url(../imgs/enredadera.png) 40% top repeat-x;
  }
  #hojas {
   background: url(../imgs/hojas.png) 50% bottom repeat-x;
  }

Si modifican el ancho de la ventana verán que se conserva el efecto Parallax, salvo la capa de personas la que pretendo que sea contenido (dado el caso que se requiera así).

Ahora, la magia se aplica a través de Mootools. El efecto de desplazamiento está dentro del .js que incluí al bajar el archivo y se llama FX.Style. Con él haremos que mediante un evento de click en cada botón, cada <div> se desplace en diferentes medidas de su margin-left. O sea, la primera capa #nubes se moverá -100px a la izquierda, luego #montanas lo harán -200px y así sucesivamente, logrando un efecto de profundidad en cada capa ya que se moverán en diferentes medidas:

$('btn_uno').addEvent('click', function(){
   nube.start({
      'margin-left': 0
   });
   montanas.start({
      'margin-left': 0
   });
   ciudad.start({
      'margin-left': 0
   });
   enredadera.start({
      'margin-left': 0
   });
   hojas.start({
      'margin-left': 0
   });
   personas.start({
      'margin-left': 0
   });
  });
  $('btn_dos').addEvent('click', function(){
   nube.start({
      'margin-left': -100
   });
   montanas.start({
      'margin-left': -200
   });
   ciudad.start({
      'margin-left': -300
   });
   enredadera.start({
      'margin-left': -400
   });
   hojas.start({
      'margin-left': -1000
   });
   personas.start({
      'margin-left': -500
   });
  });
$('btn_tres').addEvent('click', function(){
   nube.start({
      'margin-left': -500
   });
   montanas.start({
      'margin-left': -600
   });
   ciudad.start({
      'margin-left': -700
   });
   enredadera.start({
      'margin-left': -800
   });
   hojas.start({
      'margin-left': -1500
   });
   personas.start({
      'margin-left': -900
   });
  });
SafariFirefoxOpera

Pueden ver el código completo de cada elemento:

Ver ejemplo final

PD: El movimiento en Safari 3 anda perfecto, muy suave; ya en Firefox 2 y 3 se pega algunos saltos, y en Opera 9.2 anda mas cortado aún… Quizás sea mi computador, espero sus impresiones sobre esto.

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Alto mínimos para IE6 (y el resto, claro)

Primer aporte procedente del videocast. Como prometido, este artículo será un corto pero efectivo método para obtener la propiedad min-height en todos los browsers, especialmente para IE6 que no lo aplica para nada. Esta propiedad lo que hace es aplicar un alto mínimo a un elemento. Por ejemplo, queremos que una caja tenga un alto [...]

Ajax con Mootools

Mootools nos permite integrar fácilmente Ajax según nuestras necesidades, ya sea mediante el envio de formularios o, como lo veremos ahora, el rescate de información desde una fuente externa a nuestra página, sin tener que volver a cargar la página. Primero, construiremos un HTML donde estará un lugar delimitado en que se cargará la info [...]

textos_muy_largos_que_quiebran_nuestro_layout

Son excepciones, pero suceden momentos en que tienes tu layout bien ordenado y estructurado, y por esas cosas de la vida ingresas un texto muy largo (una URL de esas extensas) o en el comentario alguien lo hace, y toda la armonía que tenías en tu diseño se quiebra. No te quita el sueño, pero [...]

  1. perfecto!!! muy buena ilusión.

    yamir
    30 / Mayo / 2008

  2. lástima casi nada funcione con IE.

    yamir
    30 / Mayo / 2008

  3. Muy buen resultado y muy currado.
    Lo único que veo un poco irreal es la velocidad de las montañas y los edificios. Tendrían que moverse mucho mas lentos.

    Pablo Martinez
    30 / Mayo / 2008

  4. Lastima que no se vea tan bien, como lo hace en Safari, en Firefox, pero bueno, muy bueno el efecto :D

    fearlex
    30 / Mayo / 2008

  5. Quisiera agregar que gracias por tomarte el tiempo buscar alternativas, las ideas brillantes, siempre salen de estos pequenos intentos de lograr algo :D

    Saludos y gracias :D

    fearlex
    30 / Mayo / 2008

  6. Agradesco tu esfuerzo, te cuento MI experiencia

    en firefox 2.0.0.14 lo veo entrecortado, osea la animacion no es totalmente fluida

    en explorer 7 los textos de los globos de cada personaje NO salen y la animacion es como a saltos

    suerte y gracias por todos tus consejos

    marioloyola
    02 / Junio / 2008

  7. Esta simplemente es mi biblia del CSS, gracias compadre por todas las ayudas inconcientes que me has dado,
    Saludos.

    Nexon
    09 / Junio / 2008

  8. En Opera 9.5 va perfecto

    Nayland Smith
    15 / Junio / 2008

  9. Muy bueno, desde q encontre esta web no paro de mirar cosas en ella.

    Una pregunta? se podria hacer q las personas fueran botones y hacer un link desde estos?? o q se pudiera interactuar con lo q va dentro de lo q se mueve??

    blosiete
    21 / Julio / 2009

  10. ok perfecto.

    Gracias

    blosiete
    21 / Julio / 2009

  11. Hola Jorge!

    Un gran efecto! Yo lo apliqué casi enteramente para hacer mi página web.

    Por otro lado decirte que con la última versión de jQuery, Fx.Style ha quedado obsoleto y ahora hay que utilizar Fx. Morph para generar los movimientos.
    Es un cambio realmente sencillo.

    Un saludo y muchas gracias!

    Gonzalo Garcia
    13 / Enero / 2011

  12. He intentado desarrollar una web gracias a este grandioso efecto, sin embargo no logro que funcione en Internet explorer, y creeme es todo un problema.

    Ya se, yo tambien los odio, por lo sucio que juegan pero bue…

    si sabes como hacerlo funcional me darias una gran mano…

    gracias desde ya!

    abrazoo!

    lucas
    31 / Marzo / 2011

  13. Un efecto espectacular y sencillo, aparentemente, porque a mi solo me funciona en local, al subirlo al server no funcionan los botones.

    Me hariais un enorme favor si le echais un vistazo, a ver si alguien sabe donde está el error :S

    Os dejo la web. De momento solo estoy trasteando con el efecto antes de ponerme a meter contenido…

    http://www.a-creativa.com/anita/prueba

    Un abrazo!

    Verónica
    02 / Junio / 2012

  14. Muy buen efecto, pero un datalle bueno seria que el botón quede marcado dependiendo en la sección que el usuario se encuentre.

    Edwin
    30 / Septiembre / 2013

  15. Saludos,
    hay alternativas muy sencillas para conseguir efecto Parallax. Veamos un Script de menos de 1kb. en: http://parascroll.wwwtyro.net/
    No es posible superar algo así…

    scriptshow
    20 / Diciembre / 2013

  1. [...] (29/mayo/2008) : Mira el siguiente enlace para complementar este tema Parallax en uso real. ...
    Efecto Parallax en el fondo de una web » Cosas sencillas
  2. [...] que es el efecto Parallax? En la cinematografía se ve mucho este interesante efecto y en éste y éste ...
    Reproduciendo Parallax — Tablosign
  3. [...] MootoolsMy personal favorite for now in terms of usability. If you are able to understand spanish, read his explanation. ...
    Showcasing the CSS Parallax Effect: 12+1 Creative Usages | kremalicious

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 6 veces