42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
|
const b = (id) => `
|
||
|
|
<div
|
||
|
|
id="${id}"
|
||
|
|
class="confetti"
|
||
|
|
style="left: ${Math.random() * 1000}px"
|
||
|
|
>
|
||
|
|
🎈
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
const s = (id) => `
|
||
|
|
<div
|
||
|
|
id="${id}"
|
||
|
|
class="confetti"
|
||
|
|
style="left: ${Math.random() * 1000}px"
|
||
|
|
>
|
||
|
|
🧽
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
const m = document.getElementById('interactive-menu');
|
||
|
|
function balloons() { confetti(b) };
|
||
|
|
function sponges() { confetti(s) };
|
||
|
|
|
||
|
|
function confetti(f) {
|
||
|
|
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
|
||
|
|
for (let i = 0; i < 3; i++) {
|
||
|
|
const id = `c-${String(Math.random()).slice(2, 9)}`
|
||
|
|
m.insertAdjacentHTML('beforeend', f(id))
|
||
|
|
sink(id)
|
||
|
|
}
|
||
|
|
async function sink(id) {
|
||
|
|
const e = document.getElementById(id);
|
||
|
|
const startTop = getComputedStyle(e)?.top ?? '0px';
|
||
|
|
let top = parseInt(startTop.slice(0, startTop.indexOf('p')), 10);
|
||
|
|
while (top < vh + 100) {
|
||
|
|
top = top + 2;
|
||
|
|
e.style.top = `${top}px`;
|
||
|
|
await new Promise(r => setTimeout(r, 16.67));
|
||
|
|
}
|
||
|
|
e.remove();
|
||
|
|
}
|
||
|
|
}
|