Fondos animados con imágenes en CSS3

Las imágenes de fondo que ocupan toda la pantalla suelen tener un gran impacto. Es usual verlas en sitios de colecciones de moda ya que destacan en su totalidad lo que se desea mostrar, sin darle opción al ojo a mirar hacia otro lado.

Con CSS3 podemos colocar las imágenes que deseemos mostrar de fondo y al mismo tiempo, como muestra este ejemplo hacer aparecer textos sobre ellas de forma suave a través de jQuery.

Tengan en cuenta que esto solo funciona en exploradores que soportan animaciones CSS3, por lo que si quieren implementarlo en un sitio web para terceros, deben conocer estas cuestiones y así evitar problemas. Aún a pesar de estas características que ojalá se solucionen alguna vez, creo que el resultado es muy efectivo para desplegar presentaciones en loop y que ocupen un gran espacio, a través de pantallas grandes en paredes o proyectores, puede ser una buena forma de presentar una marca y armar una pequeña instalación.

Descargar Fullscreen Background Image Slideshow | Ver Demos | Tympanus

Para aplicarlo, se coloca en el HTML una lista desordenada para el visor y una división span para cada imagen:

<ul class="cb-slideshow">
    <li>
       <span>Image 01</span>
    <div>
       <h3>re·lax·a·tion</h3>
    </div>
    </li>
<li><!--...--></li>
<li><!--...--></li>
</ul>

Mientras tanto, en el CSS le damos estilo a la lista desordenada del visor y colocamos una textura sobre las imágenes a través de un :after pseudo-element.

.cb-slideshow,
.cb-slideshow:after {
             position: fixed;
             width: 100%;
             height: 100%;
             top: 0px;
             left: 0px;
             z-index: 0;
               }

.cb-slideshow:after {
             content: '';
             background: transparent url(../images/pattern.png) repeat top left;
               }

Para asegurarnos que la imagen cubra toda la pantalla sin importar el tamaño, debemos otorgar a la lista de span la propiedad background-size en cover.

.cb-slideshow li span
               {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  color: transparent;
                  background-size: cover;
                  background-position: 50% 50%;
                  background-repeat: none;
                  opacity: 0;
                  z-index: 0;
                  animation: imageAnimation 36s linear infinite 0s;
               }

El resto, pueden verlo y descargarlo desde Tympanus con todos los detalles necesarios para hacerlo funcionar con sus propias imágenes.