Crear un mensaje secreto con CSS, posición y transparencia

Podemos crear un mensaje oculto con CSS, que cuando vayamonos desplazándonos por la página, las letras se coloquen en su lugar y recreen este mensaje oculto, gracias a la propiedad position y a la transparencia.

Al principio el mensaje se ve así:

fixedletters

scroll-letters

Y al final, veremos el mensaje oculto si vamos haciendo “scroll” por la página:

completemessage

Para crearlo primero deberemos añadir los dos divs que actuarán en nuestro documento:

<div id="fixed-letters">
</div>

<div id="scroll-letters">
</div>

Deberemos descargar las imágenes que muestran las dos partes del div. La primera sería fixed-letters, la segunda sería scroll-letters, y subirlas a nuestro servidor.

El código CSS sería así (Las letras fixed tienen posicionamiento fixed, mientras que las otras letras tienen posicionamiento relativo):

#fixed-letters {
	position: fixed;
	top: 200px;
	left: 100px;
	background: url(images/fixed-letters.gif) white no-repeat;
	width: 500px;
	height: 125px;
}

#scroll-letters {
	position: relative;
	top: 1200px;
	left: 100px;
	background: url(images/scroll-letters.gif) top center no-repeat;
	width: 500px;
	height: 825px;
}

En esta animación se muestra lo que ocurre (Espera unos instantes):

mensaje-secreto-css