Parallax en uso real

29/May/2008 233

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. www.a913.vip [#]

    Some really fantastic work on behalf of the owner of this website,
    perfectly great content.

    my homepage … http://www.a913.vip

  2. http://j.mp/ [#]

    Hurrah! Finally I got a web site from where I be able
    to actually obtain valuable data regarding
    my study and knowledge. scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  3. http://bitly.com/3nkdKIi [#]

    If some one desires to be updated with most up-to-date technologies therefore he must be
    go to see this website and be up to date everyday. ps4
    games https://bitly.com/3nkdKIi ps4 games

  4. HenryUnfiP [#]

    gay dating service new york
    gay dating rosemead
    gay dating sim android

  5. Mobile recharge [#]

    What a beautiful blog

  6. coub.com [#]

    When someone writes an piece of writing he/she maintains the plan of a user in his/her
    brain that how a user can be aware of it. Therefore that’s why this article is amazing.

    Thanks! scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  7. http://www.iherb.com/search?kw=questbars [#]

    Admiring the hard work you put into your website and detailed information you present.
    It’s awesome to come across a blog every once in a while that isn’t the same out of
    date rehashed information. Fantastic read! I’ve bookmarked your site and I’m adding your RSS feeds to my Google
    account. quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  8. zithromaxeska [#]

    generic name for zithromax azithromycin zithromax over the counter zirthomax

  9. Carlblabs [#]

    buy diflucan canada

  10. Carlblabs [#]

    ivermectin cream 5%

  11. HenryUnfiP [#]

    discreet married gay dating
    dating site chubby gay male
    gay dating his dad

  12. buyprovigilonline [#]

    https://modafilmdmodafinil.com/ modafinil india

  13. bactrim antibiotic [#]

    bactrim Sulfamethoxazole side effects

  14. Tedblabs [#]

    tadalafil 60

  15. canine ivermectin for sale [#]

    acheter stromectol https://stromectolforte.com/# ivermectin human dose uk ivermectin tablets

  16. prednisoloneforcats [#]

    prednisone online prednisone side effects

  17. accutane side effects [#]

    https://genisotretinoin.com/ isotretinoina

  18. modafinilprovigil [#]

    modafinil interactions modafinil provigil

  19. cetirizine 10mg tablets uses [#]

    zyrtec dosage chart – http://allergyd.com

  20. modafinilforsale [#]

    provigil price modafinil smart drug

  21. cialis 20mg [#]

    cialis price cialis coupon

  22. bactrim and alcohol [#]

    trimethoprim for dogs bactrim dosing

  23. GazInvake [#]

    tadalafil cost in canada

  24. Ugoblabs [#]

    where to buy cialis online uk

  25. prednisoneforsale [#]

    prednisone steroid prednisone no prescription

  26. modalert200 [#]

    https://provogilpleasure.com/ buy modafinil reddit

  27. bactrim generic [#]

    sulfamethoxazole uses https://bactrimsulfamethoxazole.com/

  28. modafinilforsale [#]

    modalert online provigil half life

  29. stromectolforte.com [#]

    ivermectin https://stromectolforte.com/# ivermectin brand name ohio judge ivermectin ruling

  30. provigilandalcohol [#]

    provigil 100 mg what is modafinil

  31. GaloInvake [#]

    discount zithromax

  32. GustavoVet [#]

    dissertation editing rates
    article writing service

  33. modafinilandalcohol [#]

    modafinil generic buy modalert

CSSLab