Como crear partículas para incluirlas en un banner, o en alguna zona de su diseño web, puede resultar en un agregado atractivo para la terminación de cualquier sitio web. Si tienes algún proyecto que, en su propia opinion, desea que posea un poco de dinamismo fuera de lo regular, es probable que este pequeño código le sea de ayuda. Como crear partículas en JavaScript, le va a permitir crear tanto Hero Banners o Paginas de Destinos con una mejor atención y fluidez estética.

1. Contenido HTML

Lo primero que vamos a crear es el contenedor en HTML. Este le vamos a dar un estilo el cual nos va a permitir ver las partículas sin problema alguno. Ademas, incluiremos un titulo para reflejar el propósito del contenedor.

<div style="overflow: hidden; position: relative; width: 100%; text-align: center; margin: 30px 0; background-color: #204181; padding: 150px 0;">
  <h1 style="font-size: 35px; font-weight: 700; @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); font-family: 'Lobster', cursive; color: white;">Como crear partículas <br>con JavaScript</h1>
</div>

Previsualizacion del HTML antes descrito.

2. Las partículas en JavaScript

El script esta descrito de esta forma:

Creamos tres constantes:

1. colors: Un Arreglo para guardar todos los colores que deseemos usar para las partículas;
2. numBalls: Registrara la cantidad de bolas que usaremos como partículas;
3. balls: Un arreglo que usaremos para incluir en contenedor «div» de las bolas.

Luego, incluiremos un for loop, el cual generara las bolas con los estilos pertinentes. Para darle un toque aleatorio a las partículas, usaremos Math.floor(Math.random() * xxx). Así podremos obtener, variedad de colores (los registrados en el arreglo «colors»), rango de formas (desde cuadrados hasta círculos), movimiento aleatorio.

La ultima parte del código, dará paso a la animación que permitirá que las partículas se muevan dentro del contenedor padre. Para este propósito, estaremos usando un forEach() con la animaremos cada partícula independientemente. Sin mas aquí les dejos el código en cuestión.

<script>
				/* Some random colors*/
		const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];
		
		const numBalls = 150;
		const balls = [];
		
		for (let i = 0; i < numBalls; i++) {
		  let ball = document.createElement("div");
		  ball.classList.add("ball");
		  ball.style.position = "absolute";
		  ball.style.borderRadius = `${Math.floor(Math.random() * 100)}%`;
		  ball.style.opacity = ".7";
		  ball.style.background = colors[Math.floor(Math.random() * colors.length)];
		  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;
		  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;
		  ball.style.transform = `scale(${Math.random()})`;
		  ball.style.width = `${Math.random()}em`;
		  ball.style.height = ball.style.width;
		  
		  balls.push(ball);
		  document.getElementById('top-container').append(ball);
		}
		
		/* Keyframes*/
		balls.forEach((el, i, ra) => {
		  let to = {
			x: Math.random() * (i % 2 === 0 ? -11 : 11),
			y: Math.random() * 12
		  };
		
		  let anim = el.animate(
			[
			  { transform: "translate(0, 0)" },
			  { transform: `translate(${to.x}rem, ${to.y}rem)` }
			],
			{
			  duration: (Math.random() + 1) * 2000, /* random duration*/
			  direction: "alternate",
			  fill: "both",
			  iterations: Infinity,
			  easing: "ease-in-out"
			}
		  );
		});		
		</script>

Modificaciones extra

Modificar para obtener variaciones es muy fácil una vez tienes todo hecho. Presta atención al texto en negrita, la cual describe que parte modificar en el código.

• Agrega o elimina colores a las particulas:

const colors = ["#3cc157", "#2aa7ff", "#1b1b1b", "#fcbc0f", "#f85f36", "#201481"];

• Aumenta o disminuye las particulas:

 const numBalls = 200;

• mayor distancia recorrida por las partículas: modifica la variable «x» y la variable «y» con un numero mayor.

...
let to = {
                x: Math.random() * (i % 2 === 0 ? -51 : 51),
                y: Math.random() * 52,
...

• Agrega un pequeño pare mientras aumentas el tamaño de la particula y la rotas los grados que desees.

...
let to = {
                ...
                r: Math.random() * 260
};
let anim = el.animate(
                [
                    ...
                    {transform: "scale(2.5)"},
                    {transform: `rotate(${to.r}deg)`}
...

• Mayor tiempo para una partícula moverse de un punto a otro:

...
{transform: `rotate(${to.r}deg)`}
                ],
                {
                    duration: (Math.random() + 2) * 6000,
...