Fondo Web Animado

Aprenderemos en este artículo a crear un fondo web animado para una página web simple. Para ello utilizaremos los lenguajes de código HTML y CSS.

Abordaremos en primer lugar el código HTML. Empezaremos creando un div class con el nombre particle. Y a su vez, crearemos del mismo modo un id con el nombre particle1.

Crearemos un <div> </div>, y escribiremos el código entre las etiquetas <body> </body>.

<div class='particle' id='particle1'></div>
<div class='particle' id='particle2'></div>
<div class='particle' id='particle3'></div>
<div class='particle' id='particle4'></div>
<div class='particle' id='particle5'></div>
<div class='particle' id='particle6'></div>
<div class='particle' id='particle7'></div>
<div class='particle' id='particle8'></div>
<div class='particle' id='particle9'></div>

A continuación abordaremos el código CSS. Primero estableceremos el body (o cuerpo de la página) donde irán insertadas las partículas que vamos a crear.

html, body {
  height: 100%;
  min-height: 100vh;
  background-color: #FFF;
}

Seguidamente crearemos la forma en sí de la partícula con el siguiente código CSS.

.particle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 15vmin;
  height: 15vmin;
  border-radius: 50%;
  box-shadow: 0 3vmin 3vmin rgba(0, 0, 0, 0.3), 0 -6vmin 3vmin rgba(0, 0, 0, 0.1) inset, 0 9vmin 3vmin rgba(255, 255, 255, 0.1) inset;
  opacity: 0;
  animation: doit 2500ms infinite cubic-bezier(0.125, 0, 0.41, 0);
  animation-direction: reverse;
}

Una vez que hemos creado la forma, le daremos color, y para que haya variedad de colores, asignaremos 1 color a cada partícula, con el siguiente código CSS.

Ver código

Ya casi hemos terminado. Crearemos por último la regla keyframes el siguiente código CSS

@keyframes doit {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(0.1);
  }
}

Nota Importante: Un keyframe es una regla de CSS que permite construir animaciones, y esto se logra aplicando una transición de un elemento DOM de un conjunto de reglas de estilo, a otro. Funciona de la siguiente forma:Se declara la regla usando @keyframes y posterior a eso se le da un nombre a la animación.

La demostración que podéis ver a continuación, no tiene solo 9 partículas, sino que tiene 600 partículas. De ahí que el efecto visual sea impactante y muy decorativo.

Puedes ver el funcionamiento del Fondo Web Animado en el siguiente enlace:

Fondo Web Animado

Fondo Web Animado

Cookies