Fondo de partículas animadas con JavaScript puro

Vista prévia

Descripción

Este es un script simple para generar responsive, aleatorio, CSS3 animado partículas (bolas) para su fondo .

Funcionamiento

Define los colores y números de bolas para generar.

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];
const numBalls = 50;

Anexe las partículas generadas al cuerpo.

for (let i = 0; i < numBalls; i++) {

let ball = document.createElement("div");

ball.classList.add("ball");

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.body.append(ball);
}

Anime las partículas.

// 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"


}

);
});

Los principales estilos CSS para las partículas.

.ball {

position: absolute;

border-radius: 100%;

opacity: 0.7;
}