96 lines
2.4 KiB
JavaScript
96 lines
2.4 KiB
JavaScript
|
|
function generateParticles(n) {
|
|
let value = `${getRandom(2560)}px ${getRandom(2560)}px #000`;
|
|
for (let i = 2; i <= n; i++) {
|
|
value += `, ${getRandom(2560)}px ${getRandom(2560)}px #000`;
|
|
}
|
|
return value;
|
|
}
|
|
|
|
function generateStars(n) {
|
|
let value = `${getRandom(2560)}px ${getRandom(2560)}px #fff`;
|
|
for (let i = 2; i <= n; i++) {
|
|
value += `, ${getRandom(2560)}px ${getRandom(2560)}px #fff`;
|
|
}
|
|
return value;
|
|
}
|
|
|
|
function getRandom(max) {
|
|
return Math.floor(Math.random() * max);
|
|
}
|
|
|
|
function initBG() {
|
|
const particlesSmall = generateParticles(1000);
|
|
const particlesMedium = generateParticles(500);
|
|
const particlesLarge = generateParticles(250);
|
|
const particles1 = document.getElementById('particles1');
|
|
const particles2 = document.getElementById('particles2');
|
|
const particles3 = document.getElementById('particles3');
|
|
|
|
if (particles1) {
|
|
particles1.style.cssText = `
|
|
width: 1px;
|
|
height: 1px;
|
|
border-radius: 50%;
|
|
box-shadow: ${particlesSmall};
|
|
animation: animStar 50s linear infinite;
|
|
`;
|
|
}
|
|
|
|
if (particles2) {
|
|
particles2.style.cssText = `
|
|
width: 1.5px;
|
|
height: 1.5px;
|
|
border-radius: 50%;
|
|
box-shadow: ${particlesMedium};
|
|
animation: animateParticle 100s linear infinite;
|
|
`;
|
|
}
|
|
|
|
if (particles3) {
|
|
particles3.style.cssText = `
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
box-shadow: ${particlesLarge};
|
|
animation: animateParticle 150s linear infinite;
|
|
`;
|
|
}
|
|
|
|
const starsSmall = generateStars(1000);
|
|
const starsMedium = generateStars(500);
|
|
const starsLarge = generateStars(250);
|
|
const stars1 = document.getElementById('stars1');
|
|
const stars2 = document.getElementById('stars2');
|
|
const stars3 = document.getElementById('stars3');
|
|
|
|
if (stars1) {
|
|
stars1.style.cssText = `
|
|
width: 1px;
|
|
height: 1px;
|
|
border-radius: 50%;
|
|
box-shadow: ${starsSmall};
|
|
`;
|
|
}
|
|
|
|
if (stars2) {
|
|
stars2.style.cssText = `
|
|
width: 1.5px;
|
|
height: 1.5px;
|
|
border-radius: 50%;
|
|
box-shadow: ${starsMedium};
|
|
`;
|
|
}
|
|
|
|
if (stars3) {
|
|
stars3.style.cssText = `
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
box-shadow: ${starsLarge};
|
|
`;
|
|
}
|
|
}
|
|
|
|
document.addEventListener('astro:after-swap', initBG);
|
|
initBG(); |