Juan Manuel 23 de diciembre de 2009 a las 11.21
   Imprimir artículo
elWebmaster.com

Sorprendente efecto Parallax 3D logrado con CSS


cssEl efecto Parallax es una técnica que consiste en aplicar el efecto de profundidad y movimiento en una imagen a través de capas. Una especie de pseudo-3D con movimiento.

Generalmente este efecto se logra con un poco de javascript, pero Roman Cortés (¿se acuerdan de él?) ha demostrado una vez más estar totalmente de remate habiendo realizado una imagen animada con paralaje sólo con CSS

Parallax CSS: el efecto explicado

Para conseguir este alocado efecto sin una sola línea de javascript pero con muuucho html/css, Román creó un gran contenedor con muchísimos <span> a modo de “columnas” que contienen el fondo de la imagen dividido en partes.

En el :hover de cada elemento (o sea, al pasar el cursor del mouse por encima) se desplaza el fondo una cierta cantidad de píxeles a la derecha o la izquierda. Alucinante, inútil y totalmente creativo: Román Cortés nuevamente demuestra ser un genio del CSS.

Este es el código (totalmente ofuscado):

  1. <header>
  2.  
  3. <style type="text/css">
  4. a#a96:hover img {left: 224px}a#a96:hover b.d1 {background-position: 224px 0; width: 224px}a#a96:hover b.d2 {background-position: -449.6px 18px;}a#a96:hover b.d3 {background-position: -32px -216px; width: 368px}a#a96:hover b.d4 {background-position: -64px -74px;}a#a97:hover img {left: 223px}a#a97:hover b.d1 {background-position: 223px 0; width: 223px}a#a97:hover b.d2 {background-position: -449.7px 18px;}a#a97:hover b.d3 {background-position: -32.3333333333px -216px; width: 367.666666667px}a#a97:hover b.d4 {background-position: -64.6666666667px -74px;}a#a98:hover img {left: 222px}a#a98:hover b.d1 {background-position: 222px 0; width: 222px}a#a98:hover b.d2 {background-position: -449.8px 18px;}a#a98:hover b.d3 {background-position: -32.6666666667px -216px; width: 367.333333333px}a#a98:hover b.d4 {background-position: -65.3333333333px -74px;}a#a99:hover img {left: 221px}a#a99:hover b.d1 {background-position: 221px 0; width: 221px}a#a99:hover b.d2 {background-position: -449.9px 18px;}a#a99:hover b.d3 {background-position: -33px -216px; width: 367px}a#a99:hover b.d4 {background-position: -66px -74px;}
  5. </style>
  6.  
  7. </header>
  8.  
  9.  
  10. <body>
  11.  
  12. <a href="#" id="a0"><img src="meninas_bg2.jpg" width="80" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a1"><img src="meninas_bg2.jpg" width="81" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a> <a href="#" id="a2"><img src="meninas_bg2.jpg" width="82" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a3"><img src="meninas_bg2.jpg" width="83" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a4"><img src="meninas_bg2.jpg" width="84" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a5"><img src="meninas_bg2.jpg" width="85" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a6"><img src="meninas_bg2.jpg" width="86" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a7"><img src="meninas_bg2.jpg" width="87" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a8"><img src="meninas_bg2.jpg" width="88" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a9"><img src="meninas_bg2.jpg" width="89" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a10"><img src="meninas_bg2.jpg" width="90" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a11"><img src="meninas_bg2.jpg" width="91" height="455" alt="" /><b class="d1"></b>
  13.  
  14. </body>

¡Espero que lo disfruten, yo me quedé diez minutos pasando el mouse por sobre la imagen ^_^!

Hagan clic aquí para ir al blog de Román, donde explica el efecto 😉


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (7)

  1. Roberto Jiménez dice:

    Genial….lo pondré en marcha…gracias.!!!!

  2. Alfredo dice:

    SÚPER CSS.

  3. mªjose dice:

    muy bien

  4. mªjose dice:

    lo veo mu bien lo probare

  5. optim dice:

    impresionanteee!!

  6. jerson becerra dice:

    sorprendente … muy interesante … coollllllllllll!!!”

  7. Gris dice:

    Buenísimo

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder