Author: | Nash Vail |
---|---|
Views Total: | 12,263 views |
Official Page: | Go to website |
Last Update: | December 30, 2017 |
License: | MIT |
Preview:

Description:
This is a simple script to generate responsive, random, CSS3 animated particles (balls) for your background.
How to use it:
Define the colors and numbers of balls to generate.
const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"]; const numBalls = 50;
Append 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); }
Animate 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" } ); });
The main CSS styles for the particles.
.ball { position: absolute; border-radius: 100%; opacity: 0.7; }
particle append anyother div ?