Excelentes diseños web con efecto Parallax

4

Me sorprende como las técnicas de animación con CSS avanzan día a día, nuevas técnicas, nuevos códigos, nuevas funciones hacen que el diseño web se cada vez mas interactivo sin la necesidad de usar flash. CSS junto con JavaScripts es una conjunción excelente ya que con CSS estilizamos el diseño y con Java le damos vida.

Hoy quiero mostrarles un efecto llamado Parallax, una técnica que consiste en aplicar el efecto de profundidad de campo a través de capas, utilizando CSS. Esto permite simular un efecto de cámara cinematográfica, en donde los objetos del frente se mueven a una velocidad mayor que los del fondo, simulando la profundidad de campo que vemos en el cine. Las imágenes que se usan deben ser PNG con fondo transparente para poder superponer capas. Esto hace que IE6 (internet explorer) quede excluido del listado de navegadores que soportan Parallax, a no ser que hagas los FIX correspondientes en el CSS.

Para que puedas apreciar este efecto, te dejo un listado con 13 sitios que utilizan el efecto Parallax.

Nike Better World

Webs Efecto Parallax

Smart USA

Webs Efecto Parallax

Ben The Body Guard

Webs Efecto Parallax

Laurentius

Webs Efecto Parallax

Mario Kart Wii

Webs Efecto Parallax

Moods of Norway

Webs Efecto Parallax

Art of Flight

Webs Efecto Parallax

Smokey Bones

Webs Efecto Parallax

BeerCamp

Webs Efecto Parallax

Beetle – Volkswagen

Webs Efecto Parallax

New Zealand

Webs Efecto Parallax

Activate Drinks

Webs Efecto Parallax

Gidsy – Making the Perfect Listing

Webs Efecto Parallax

Via webdesignerwall.com

Quizas te interese   20 Excelentes sitios web de CSS Awards

4 COMENTARIOS

  1. Los diseños con este efecto me parecen espectaculares, como bien dices es increíble a la velocidad a la que va esta tecnología, prácticamente no hay tiempo de estar al día.
    Hace algún tiempo encontré un diseño que me encantó y que pueden que les guste a ustedes también: http://www.vivascom.com.br/

    Saludos

Dejar una respuesta

Please enter your comment!
Please enter your name here