Se lee en 1 minuto

Parallax 3D es un experimento que usa las transformaciones 3D de CSS3. Utiliza 3 imágenes distintas para crear el efecto:

  • Una imagen de fondo con las estrellas, que en realidad no se mueven.
  • Una imagen PNG con fondo transparente por encima con los TIE fighters.
  • Una imagen PNG en primer plano de la cabina de una nave rebelde de Star Wars, con las ventanas transparentes para mostrar las dos capas que tiene detrás.

El ejemplo basa su interactividad en la posición del ratón dentro del navegador, por lo que en mobile y tablets no hará el efecto y simplemente muestra una imagen fija con la composición, lo cual no deja de resultar interesante 🙂

Las imágenes se adaptan al ancho del navegador, por lo que recomiendo ver el ejemplo en una pantalla lo más grande posible (¿iMac?).

Ver este ejemplo.

* Curiosamente, en mac funciona bien en todos los navegadores (modernos) principales. En Windows depende un poco de la resolución de pantalla que uses. Incluso a igual resolución, he comprobado que no se comporta igual en IE11 dependiendo de si estamos en Windows 7 u 8.1… en fin, una de esas cosas a añadir al ‘to-do list’ para investigar…

Este experimento está basado en un ejemplo de CodyHouse.