Morton 23 de junio de 2014 a las 09.00
   Imprimir artículo
elWebmaster.com

Efecto parallax con CSS


css3wide1Desde hace un buen rato que el conocido efecto llamado “parallax” se ha vuelto popular en los sitios web modernos.  El truco consiste en añadir diferentes capas de imágenes que se mueven en diferentes direcciones y a diferente velocidad. Esto genera un efecto òptico agradable y mantiene la atención del visitante. ¿Pero cómo lograrlo con CSS?

Ver demostración >>

Para lograr el efecto, las imágenes de fondo tienen que estar dispuestas en distintos elementos. Estos elementos necesitan, además,  ser definidos como background-attachment: fixed. Al definir background-attachment el comportamiento y la posición de cualquier imagen de fondo pueden ser cambiados.

El valor inicial de la propiedad es scroll, que básicamente significa que la posiciòn de la imagen está fija a su elemento. El usuario hace scroll en el sitio y los elementos se mueven hacia arriba y hacia abajo al igual que las imágenes de fondo.

background-attachment: fixed define que la posiciòn de la imagen de fondo no está fija al elemento dependiente, sino fija al punto de vista. Esto significa que si la imagen permanecerá visualmente en la misma posición sin importar cuánto scroll se haya hecho.

Éste es el código necesario:

<!-- Cuatro contenedores para las cuatro imágenes de fondo -->
<div class="parallax">
  <div class="bg__foo">foo</div>
  <div class="bg__bar">bar</div>
  <div class="bg__baz">baz</div>
  <div class="bg__bazz">bazz</div>
</div>

  height: 50vh;
  text-indent: -9999px;

  background-attachment: fixed;

  background-position: center center;
  background-size: cover;

   &:nth-child(2n) {
    box-shadow: inset 0 0 1em #111;
  }
}

.bg__foo {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg
  );
}

.bg__bar {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg
  );
}

.bg__baz {
  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg
  );
}

.bg__bazz {
  height: 100vh;

  background-image: url(
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg
  );
}

Eso es todo ¡Esperamos que sea de utilidad!

Fuente original del artículo: David Walsh Blog
Traducción realizada por
elWebmaster.com


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

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