portfolio-webpage/public/js/bg.js

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