Juan Manuel 23 de Diciembre de 2009 a las 11.21

Sorprendente efecto Parallax 3D logrado con CSS

CSS, html, Diseño Gráfico, román cortés, Parallax

css El 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  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):

PLAIN TEXT

<header>
<style type="text/css">
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;}
</style>
</header>
<body>
<a href="#" id="a0"><img src="meninas_bg2.jpg" width="80" height="455" alt="" /> </a><a href="#" id="a1"><img src="meninas_bg2.jpg" width="81" height="455" alt="" /> </a> <a href="#" id="a2"><img src="meninas_bg2.jpg" width="82" height="455" alt="" /> </a><a href="#" id="a3"><img src="meninas_bg2.jpg" width="83" height="455" alt="" /> </a><a href="#" id="a4"><img src="meninas_bg2.jpg" width="84" height="455" alt="" /> </a><a href="#" id="a5"><img src="meninas_bg2.jpg" width="85" height="455" alt="" /> </a><a href="#" id="a6"><img src="meninas_bg2.jpg" width="86" height="455" alt="" /> </a><a href="#" id="a7"><img src="meninas_bg2.jpg" width="87" height="455" alt="" /> </a><a href="#" id="a8"><img src="meninas_bg2.jpg" width="88" height="455" alt="" /> </a><a href="#" id="a9"><img src="meninas_bg2.jpg" width="89" height="455" alt="" /> </a><a href="#" id="a10"><img src="meninas_bg2.jpg" width="90" height="455" alt="" /> </a><a href="#" id="a11"><img src="meninas_bg2.jpg" width="91" height="455" alt="" />
</body>