Crea un efecto de burbujas con CSS como 7UP

La animación del efecto de burbujas con CSS que aparece en 7UP es un bello ejemplo de cómo llevar un imagen de marca hasta el diseño del sitio web. La animación consiste en unos pocos elementos: el SVG ‘dibujo’ de las burbujas y luego dos animaciones aplicadas a cada burbuja.

Puedes ver el efecto aquí.

La primera animación cambia la opacidad de la burbuja y la mueve verticalmente en la caja de visualización; la segunda crea el efecto de bamboleo para añadir realismo. Las compensaciones se manejan apuntando a cada burbuja y aplicando una duración de animación y un retardo diferentes.

Para crear nuestras burbujas usaremos SVG. En nuestro SVG creamos dos capas de burbujas: una para las burbujas más grandes y otra para las más pequeñas. Dentro del SVG colocamos todas nuestras burbujas en la parte inferior de la caja de visualización.

<g class="bubbles-large" stroke-width="7">
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
  ...
</g>
<g class="bubbles-small" stroke-width="4">
  <g transform="translate(147 984)">
  <circle cx="15" cy="15" r="15"/>
  </g>
</g>
  ...
</g>

Para aplicar dos animaciones separadas a nuestros SVGs, ambas utilizando la propiedad de transformación, necesitamos aplicar las animaciones a elementos separados. El elemento <g> en SVG puede ser usado como un div en HTML; necesitamos envolver cada una de nuestras burbujas (que ya están en un grupo) en una etiqueta de grupo.

<g>
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
</g>

CSS tiene un potente motor de animación y un código realmente simple para producir animaciones complejas. Empezaremos moviendo las burbujas hacia arriba de la pantalla y cambiando su opacidad para que se desvanezcan al principio y al final de la animación.

@keyframes up {
  0% {
  opacity: 0;
  }
  10%, 90% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  transform: translateY(-1024px);
  }
}

Para crear un efecto de bamboleo, basta con mover la burbuja hacia la izquierda y hacia la derecha, en la cantidad justa – demasiado hará que la animación se vea demasiado aturdida y desconectada, mientras que muy poco pasará desapercibido en la mayoría de los casos. La experimentación es clave cuando se trabaja con animación.

@keyframes wobble {
  33% {
  transform: translateX(-50px);
  }
  66% {
  transform: translateX(50px);
  } }

Para aplicar la animación a nuestras burbujas, usaremos los grupos que usamos anteriormente y la ayuda de nth-of-type para identificar cada grupo de burbujas individualmente. Comenzamos aplicando un valor de opacidad a las burbujas y a la propiedad de cambio de voluntad para utilizar la aceleración de hardware.

.bubbles-large > g {
  opacity: 0;
will-change: transform, opacity;}
.bubbles-large g:nth-of-type(1) {...}
...
.bubbles-small g:nth-of-type(10) {...}

Queremos mantener todos los tiempos de animación y los retardos dentro de un par de segundos el uno del otro y ajustarlos para que se repitan infinitamente. Por último, aplicamos la función de tiempo de entrada y salida a nuestra animación de bamboleo para que parezca un poco más natural.

.bubbles-large g:nth-of-type(1) {
  animation: up 6.5s infinite; }
.bubbles-large g:nth-of-type(1) circle {
  animation: wobble 3s infinite ease-in-out; }
...
bubbles-small g:nth-of-type(9) circle {
  animation: wobble 3s 275ms infinite ease-in-out; }
.bubbles-small g:nth-of-type(10) {
animation: up 6s 900ms infinite;}

Con esto ya tendrás la animación del efecto de busbujas con CSS como 7UP lista para tu página web. Como siempre, si te ha gustado este artículo, siempre puedes compartirlo o dejar tu comentario 🙂