Parallax en uso real

29/may/2008 21

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.

Comentarios

  1. yamir [#]

    perfecto!!! muy buena ilusión.

  2. yamir [#]

    lástima casi nada funcione con IE.

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

    [...] (29/mayo/2008) : Mira el siguiente enlace para complementar este tema Parallax en uso real. Etiquetas: efecto Parallax Topics: CSS, Desarrollo [...]

  4. Pablo Martinez [#]

    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.

  5. fearlex [#]

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

  6. fearlex [#]

    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

  7. Reproduciendo Parallax — Tablosign [#]

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

  8. marioloyola [#]

    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

  9. Nexon [#]

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

  10. Nayland Smith [#]

    En Opera 9.5 va perfecto

  11. blosiete [#]

    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??

  12. Jorge Epuñan [#]

    blosiete: claro, puedes hacer que sea clickeable lo q quieras; manejalos mediante ID en Mootools.

  13. blosiete [#]

    ok perfecto.

    Gracias

  14. Gonzalo Garcia [#]

    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!

  15. Jorge Epuñan [#]

    Hey Gonzalo, me gusto mucho tu sitio. Es verdad Mootools ha cambiado mucho ultimamente lo he dejado ya q me dedique casi por completo a jQuery, pero los efectos de Mootools son muy superiores, principalmente su fisica asi q sigo jugando con el.

  16. lucas [#]

    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!

  17. Showcasing the CSS Parallax Effect: 12+1 Creative Usages | kremalicious [#]

    [...] MootoolsMy personal favorite for now in terms of usability. If you are able to understand spanish, read his explanation. Tweet May 22, 2008 design 33 Responses Marco Nice roundup!Got you stumbled + featured on [...]

  18. Verónica [#]

    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!

  19. Jorge Epuñan [#]

    Verónica: hay un problema con la libreria de Mootools q estas cargando, trata con la misma q use en el ejemplo por si es problema de compatibidad entre versiones de la misma libreria.

  20. Edwin [#]

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

  21. scriptshow [#]

    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í…

Deja tu Comentario

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

CSSLab