CSSLab

Parallax en uso real

Tweet

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
   });
});

Pueden ver el código completo de cada elemento:

• Código CSS
• Código JS

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.