Random Responsive Balls is a simple script to create responsive and random CSS3 animated particles for your background.

particles js background codepen, javascript animation codepen, javascript bubble animation, background shape css codepen, animated services section codepen

How to make use of it:

1. Select the colors and numbers of balls to create.

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

2. Attach the generated particles to the body.

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);
}

3. Move the particles.

// 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"
    }
  );
});

4. Main CSS Styles for Particles.

.ball {
  position: absolute;
  border-radius: 100%;
  opacity: 0.7;
}

animated particles background, random responsive balls in the background Plugin/Codepen

See Demo And Download

Official Website(nashvail): Click Here

This superior jQuery/javascript plugin is developed by nashvail. For extra advanced usage, please go to the official website.