Scribd
Upload
13 views1 page

Confetti Animation on Page Load

The document contains JavaScript code that creates a simple confetti effect on a webpage. It generates 50 confetti elements that fall from the top of the screen when the page loads. Additionally, it includes CSS for the falling animation of the confetti elements.

Uploaded by

shreemayeedas15
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views1 page

Confetti Animation on Page Load

The document contains JavaScript code that creates a simple confetti effect on a webpage. It generates 50 confetti elements that fall from the top of the screen when the page loads. Additionally, it includes CSS for the falling animation of the confetti elements.

Uploaded by

shreemayeedas15
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

// Optional: Add more interactivity, like confetti on click

[Link]('DOMContentLoaded', function() {
// Simple confetti effect (requires no external libraries)
function createConfetti() {
const confetti = [Link]('div');
[Link] = 'absolute';
[Link] = '10px';
[Link] = '10px';
[Link] = `hsl(${[Link]() * 360}, 100%, 50%)`;
[Link] = [Link]() * [Link] + 'px';
[Link] = '-10px';
[Link] = 'fall 3s linear';
[Link](confetti);
setTimeout(() => [Link](), 3000);
}

// Trigger confetti on page load


for (let i = 0; i < 50; i++) {
setTimeout(createConfetti, i * 50);
}
});

// Add CSS for confetti animation


const style = [Link]('style');
[Link] = `
@keyframes fall {
to { transform: translateY(100vh); }
}
`;
[Link](style);

You might also like