Reproduciendo Parallax

26/May/2008 182

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. RodolfoZowly [#]

    what does hydroxychloroquine do buy hydroxychloroquine canada when was hydroxychloroquine first used

  2. coupon for priligy by manufacturer [#]

    I must thank you for the efforts you have put in writing this
    website. I really hope to check out the same
    high-grade blog posts by you in the future as well. In fact,
    your creative writing abilities has inspired me to get my very own site now 😉 http://www.deinformedvoters.org/dapoxetine-60mg

  3. bit.ly [#]

    Hey very nice blog!

  4. hydroxychloroquineMt [#]

    chloroquine for lupus how to make hydroxychloroquine hydro clore quinn

  5. j.mp [#]

    My partner and I stumbled over here coming from a different web
    address and thought I should check things out. I like what I
    see so now i am following you. Look forward to checking out your web page again.

  6. ivermectin for humans ivermectino [#]

    stromectol ivermectin tablets Reproduciendo Parallax | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin rezeptfrei

  7. HenryUnfiP [#]

    gay catholic dating
    gay guys dating site
    eu gay dating sites

  8. ivermectin no prescription [#]

    stromectol tablets for humans Reproduciendo Parallax | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ generic ivermectin

  9. app.gumroad.com [#]

    Hi there! Do you know if they make any plugins to safeguard against hackers?
    I’m kinda paranoid about losing everything I’ve worked hard on. Any recommendations?

    asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  10. quest bars was [#]

    I have read several just right stuff here. Definitely value bookmarking for revisiting.
    I wonder how so much effort you put to create one of these magnificent
    informative web site. quest bars http://j.mp/3C2tkMR quest bars

  11. our cheap flights [#]

    Hello There. I discovered your blog using msn. That is a very well written article.
    I’ll make sure to bookmark it and come back to read more
    of your helpful info. Thanks for the post. I’ll certainly return. cheap flights http://1704milesapart.tumblr.com/ cheap flights

  12. bit.ly [#]

    Post writing is also a excitement, if you
    know after that you can write if not it is complex to write.

    scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  13. tinyurl.com [#]

    Hi, i think that i saw you visited my blog thus i came to “return the favor”.I am attempting to find things to improve my web site!I
    suppose its ok to use some of your ideas!! ps4 https://bit.ly/3z5HwTp ps4 games

  14. http://coub.com/stories/962966-scoliosis-surgery [#]

    I really love your blog.. Very nice colors & theme. Did
    you create this web site yourself? Please reply back as I’m wanting to create my own personal
    website and would love to know where you got this from or just what the theme is called.
    Appreciate it! scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  15. hydroxychloroquineMt [#]

    plaquenil coupon plaquenil coupon hydroxychloroquine use

  16. zithromaxeska [#]

    zithrmax zithromax for urinary tract infections zithromax 500mg tablet

  17. cialis without a doctor prescription [#]

    cialis without a doctor prescription cialis tablets

  18. HenryUnfiP [#]

    gay dating zoosk or match
    gay dating in san francisco
    bi and gay flag dating

  19. zithromaxeska [#]

    zithromax-azithromycin zithromax azithromycine when to take zithromax

  20. HenryUnfiP [#]

    gay dating montclair nj
    gay dating facial aesthetics
    advice for gay dating

  21. does zyrtec make you sleepy [#]

    benadryl – http://allergyd.com

  22. benadryl [#]

    warnings for cetirizine – http://allergyd.com

  23. xquvxecd [#]

    NpVzch aiztefhjbiow, [url=http://gdxkfeqrgtlj.com/]gdxkfeqrgtlj[/url], [link=http://itswnoziipsc.com/]itswnoziipsc[/link], http://zoeecmwmxkyw.com/

  24. cialis 20mg [#]

    https://cialiswithdapoxetine.com/ generic cialis

  25. how much is ivermectin [#]

    ivermectina dosis en humanos https://stromectolforte.com/# ivermectin for humans dosage ivermectin for humans for sale

  26. ivermectin instructions for scabies [#]

    Nice blog right here! Additionally your site a lot up fast!
    What host are you the usage of? Can I get your associate hyperlink to your host?
    I wish my website loaded up as fast as yours lol http://harmonyhomesltd.com/Ivermectinum-during-pregnancy.html

  27. buyprovigilonline [#]

    provigil over the counter where to buy modafinil

  28. stromectol [#]

    stromectol 3mg tablets http://stromectolforte.com/ ivermectin for humans amazon ivermectin without prescription

  29. accutune [#]

    isotretinoin side effects accutane side effects

  30. prednison [#]

    prednisolone acetate is prednisone a steroid

  31. modalertonline [#]

    modalert reddit provigil

  32. bactrim drug class [#]

    Trimethoprim side effects https://bactrimsulfamethoxazole.com/

CSSLab