You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
714 B
JavaScript
31 lines
714 B
JavaScript
const max = 20;
|
|
|
|
const random = (min,max)=>{
|
|
return Math.random()*(max-min)+min;
|
|
}
|
|
|
|
const blendPlay = (root) => {
|
|
root.addEventListener('animationend', (e) => {
|
|
e.target.remove();
|
|
|
|
});
|
|
|
|
for (let i = 0; i < max; i++){
|
|
const bubble = document.createElement('div');
|
|
bubble.style.setProperty('--x',random(0,100)+'%');
|
|
bubble.style.setProperty('--size',random(1,10)+'em');
|
|
bubble.style.setProperty('--time',random(2,5)+'s');
|
|
bubble.style.setProperty('--to',-random(10,50)+'%');
|
|
root.appendChild(bubble);
|
|
}
|
|
|
|
}
|
|
|
|
window.onload = () => {
|
|
const root = document.querySelector('.blend').firstElementChild;
|
|
blendPlay(root);
|
|
setInterval(() => {
|
|
blendPlay(root);
|
|
}, 1000);
|
|
|
|
} |