Fondo animado con CSS 3

  • Por
  • CSS
Práctica sobre Animaciones CSS3, en la que construimos un fondo animado al estilo de la película Matrix, utilizando únicamente código CSS 3.
Estamos revisando las particularidades del sistema de animación que se ha creado a partir del lenguaje CSS, a partir de su tercera especificación. Todavía es todo un poco el preludio de lo que podremos hacer en el futuro con CSS y cómo nos ayudará a crear páginas dinámicas sin necesidad de Javascript.

Todo esto ya comenzamos a explicarlo en la introducción a las animaciones CSS, de modo que ahora vamos a hacer una práctica para asimilar los conocimientos adquiridos. Aunque hablando de ejemplos prácticos de animaciones CSS 3 queremos señalar que ya habíamos visto una práctica anteriormente, algo más sencilla que la que veremos a continuación, sobre animación de texto con CSS.

Para comenzar, podemos ver primero como quedaría nuestro ejemplo funcionando. Y recordar que para verlo, de momento, tenéis que utilizar Google Chrome o Safari.

Como podéis ver, es el típico fondo de letras que se mueven en la vertical, que conocemos si hemos visto la película Matrix, pero donde hemos colocado letras en vez de símbolos.

Lo primero que vamos a crear es nuestro archivo CSS con un fotograma clave y las propiedades de la animación.

@-webkit-keyframes fondo{
   from {top: -260%;}
   to {top: 100%;}
}

Con esto le estamos diciendo que vaya de arriba hacia abajo, con ello dará la sensación de que la animación comienza desde arriba de la parte superior de nuestra pantalla.

A continuación vemos los estilos y propiedades que vamos a necesitar para animar nuestro fondo.

#matrix{
   margin: 1em auto;
   width: 100%;
   height: 100%;
   overflow: hidden;
   background: #000;
   color: rgba(0, 255, 0, .7);
   text-shadow: rgba(255, 255, 255, .8) 0px 0px 4px;
   position: relative;   
}

Aquí principalmente damos los estilos a nuestro fondo y decimos que el texto que aparezca sea verde.

#matrix DIV{
   position: absolute;   
   top: 0;
   /* rotamos el texto*/
   -webkit-transform-origin: 0%;
   -webkit-transform: rotate(90deg);
   -webkit-animation-name: fondo;         
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: normal;
   
}

Aquí ya damos las propiedades necesarias a nuestra animación. Lo primero que hacemos es rotarla 90 grados, esto lo hacemos para que las letras caigan y no vayan de izquierda a derecha. Ya solo nos queda lo que vimos en el artículo anterior, el nombre, las veces que se repite y la dirección.

Los estilos que vemos a continuación lo que van a hacer es que los textos bajen a diferentes velocidades y en distintos intervalos de tiempo.

.f1{
   font-size: 1.2em;
}
.f2{
   font-size: .9em;
}
.c1{
   color: rgba(0, 255, 0, .5);
}
.d1{
   -webkit-animation-duration: 4s;
}
.d2{
   -webkit-animation-duration: 6s;
}
.d3{
   -webkit-animation-duration: 8s;
}
.d4{
   -webkit-animation-duration: 10s;
}
.de{   
   -webkit-animation-delay: 3s;
}

Con esto la parte de CSS esta lista, ahora pasamos a nuestro código HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Fondo animado con CSS</title>

<link rel="stylesheet" href="matrix.css" type="text/css">
</head>

<body>

   <div id="matrix">   
      <div class="d3 f1" style="left:30px;">hgd4ldhbc9kpugccsrq</div>
      <div class="d1 f2 c1" style="left:60px;">trzews0yfkldf4cvgbhjn</div>
      <div class="d2 f1" style="left:80px;">sodhr49whuyfbsrnlepjh</div>
      <div class="d4 c3 de" style="left:110px;">fue73sjf0tbkxpowfvn</div>
      <div class="d2 c1" style="left:140px;">sjdhfgueiwfgivecjowxkwpkpomvcjoeuur</div>
      <div class="d3 f2 c1" style="left:170px;">trzhfggh</div>
      <div class="d1 c1" style="left:185px;">thgpmsrthdvytfv09876tqfgv</div>
      <div class="d3 de" style="left:200px;">dhiwgfduesrjm</div>
      <div class="d4 f1" style="left:250px;">osadharshdyfeujm</div>
      <div class="d2 de" style="left:290px;">fwedjsdjhlgmrghftdercwewergjm</div>
      <div class="d3 f2" style="left:310px;">sodhr49whayfbsrnlepjh</div>
      <div class="d1 f1" style="left:350px;">p00oi0nf5sujhgdgbrjs36gdrgjpo</div>
      <div class="d4 c1" style="left:390px;">h68kgdetklbfbeswk</div>
      <div class="d2 de" style="left:410px;">dfrttvbscfsr</div>
      <div class="d1 c1 de" style="left:4430px;">sgfyb0hfrese4kc</div>
      <div class="d3 f1" style="left:530px;">hgd4ldhbc9kpugccsrq</div>
      <div class="d1 f2 c1" style="left:560px;">trzews0yfkldf4cvgbhjn</div>
      <div class="d2 f1" style="left:580px;">sodhr49whuyfbsrnlepjh</div>
      <div class="d4 c3 de" style="left:610px;">fue73sjf0tbkxpowfvn</div>
      <div class="d2 c1" style="left:740px;">sjdhfgueiwfgivecjowxkwpkpomvcjoeuur</div>
      <div class="d3 f2 c1" style="left:770px;">trzhfggh</div>
      <div class="d1 c1" style="left:785px;">thgpmsrthdvytfv09876tqfgv</div>
      <div class="d3 de" style="left:800px;">dhiwgfduesrjm</div>
      <div class="d4 f1" style="left:850px;">osadharshdyfeujm</div>
      <div class="d2 de" style="left:890px;">fwedjsdjhlgmrghftdercwewergjm</div>
      <div class="d3 f2" style="left:910px;">sodhr49whayfbsrnlepjh</div>
      <div class="d1 f1" style="left:950px;">p00oi0nf5sujhgdgbrjs36gdrgjpo</div>
      <div class="d4 c1" style="left:990px;">h68kgdetklbfbeswk</div>
      <div class="d2 de" style="left:1010px;">dfrttvbscfsr</div>
      <div class="d1 c1 de" style="left:1030px;">sgfyb0hfrese4kc</div>
   </div>
</body>
</html>

Si os fijáis tenemos varios DIV con las letras y la posición en la que se colocan, si no hacemos esto nos saldría todo junto y no se verían por toda la pantalla.
Podemos poner tantos DIV como deseemos siempre viendo la posición en la que los colocamos y teniendo en cuenta las resoluciones de pantalla.

Como podéis ver, nuestro ejemplo resulta un poco laborioso y teniendo en cuenta que simplemente sería el fondo, al que deberíamos añadir el resto de nuestro código para la creación de nuestra web, la cosa se queda un poco más compleja de lo que desearíamos. De momento, hay que tomar este ejemplo como algo experimental, pues debido a su complejidad y que las animaciones CSS no funcionan en todos los navegadores, no sería muy recomendable utilizar la técnica para una web real. Por lo menos queremos que sirva para ver el tema de las animaciones CSS 3, pues el ejemplo es bastante interesante.

Por último os dejo el ejemplo funcionado en una página aparte.

En el siguiente artículo veremos un ejemplo parecido pero esta vez caerá nieve y con distintos movimientos en vez de la caída recta de este ejemplo.

Autor

Sara Alvarez

Equipo DesarrolloWeb.com

Compartir

Comentarios

Amshel Levin

29/11/2010
CSS3 y los navegadores
Teneis que decir que navegadores dan soporte CSS3 hasta la fecha. Por ejemplo, en Firefox, tanto en IE, no se ven los efectos. Es mas, en IE no se ven siquiera las letras. En otros navegadores que lo he probado, como Google Chrome y Safari si se ve bien el efecto.

joan

01/12/2010
mmm. no va...
El ejemplo no funciona... sólo veo un fondo negro y, arriba, unas letras en verde, pero no se mueve nada.

Ronald Montenegro

01/12/2010
Navegadores que funcionan
Ciertamente funciona unicamente en Safari y Google Chrome, ya que yo lo probé en Opera 10.63, Opera 11 beta, Firefox 3.6.12 y no funciona aún.
Internet Explorer 8 no lo inclui ya que este no soporta css3 e IE9 si , pero solo está Vista y 7!

franz1628

02/12/2010
no se ven los efectos
De que vale esto si no funciona en todos los navegadores?? firefox ni IE funcionan

GNU-Tony

13/12/2010
en cromium se ve
Hola a todos:
En el navegador cromium vers.(8.0.552.215 (67652) Ubuntu 10.10) se ve, aunque el texto aparece rotado de dos maneras.. 90º como marca el ejemplo y 270º... aunque esto no afecta a la dirección de caída del texto... de momento me queda algo grande el tema para hacer una critica mas constructiva pero me gusta la idea de poder animar y controlar los elementos de la web a nuestro antojo...

Me parece muy interesante el ejercicio, y espero alcanzar el conocimiento para desarrollar mis propias ideas.

omarox12

27/8/2011
animación
le faltaron las propiedades de animación para mozilla y explorer. Esto del css3 tiene una instrucción para cada explorador.

elposi19

14/3/2012
Saludo
Gracias, como siempre un gran aporte

saltenio30

23/2/2013
Gracias
Hola la verdad que muy agradecido a esta web ya que en mis primeros pasos como diseñador y programador me esta ayudando mucho.
Ojala cuando me perfecciones pueda aportarles algo.
Gracias