El siempre genial David Walsh publicaba el otro día un pequeño artículo sobre fondos animados con CSS3. En los comentarios, alguien sugería mejorarlo añadiendo un efecto parallax, así que me he animado a hacerlo.
¿Qué vamos a conseguir? Una bucólica escena campestre, en la que las nubes pasan mientras el Sol sale y se pone. Todo esto con sólo un div
y un span
. Las nubes podrían haber sido generadas también con CSS, pero me parecía demasiado lío y opté en su lugar por usar 3 imágenes. Podéis ver el resultado en estas páginas de demo:
- Código sin prefijos: http://demo.cmorales.es/background-animation/index.html
- Código con prefijos: http://demo.cmorales.es/background-animation/prefixed.html
La versión sin prefijos funciona (actualmente, según caniuse.com) en Firefox e IE10. En Chrome es necesaria la versión con prefijos.
Por comodidad, durante el resto del tutorial pondré el código SIN prefijos. En ambas demos el código CSS está en la cabecera del propio archivo, por lo que puedes copiar el código que necesites simplemente dándole a ver código fuente.
Veamos cómo se consigue este efecto.