Introduction to Confetti.js
Confetti.js is a lightweight JavaScript library that allows you to add beautiful confetti effects to your web pages. Perfect for celebrations, achievements, or simply to impress your visitors, Confetti.js makes it easy to create stunning animations without a heavy performance cost.
Core API Methods
Basic Initialization
const confetti = new Confetti(); confetti.start();
Customizing Confetti Appearance
const confetti = new Confetti({
width: window.innerWidth,
height: window.innerHeight,
colors: ['#ff0', '#0ff', '#f00'],
shapes: ['square', 'circle', 'triangle']
});
confetti.start();
Controlling Confetti Behavior
const confetti = new Confetti();
confetti.start();
// Stop after 5 seconds
setTimeout(() => {
confetti.stop();
}, 5000);
Advanced Usage
Fireworks Simulation
const confetti = new Confetti();
document.getElementById('celebrateButton').addEventListener('click', () => {
confetti.start();
setTimeout(() => {
confetti.stop();
}, 3000);
});
App Example with Confetti.js
Below is a small web app example that uses Confetti.js to celebrate form submissions:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Celebration</title>
<script src="path/to/confetti.js"></script>
<style>
body { font-family: Arial, sans-serif; }
.container { max-width: 400px; margin: auto; padding: 20px; }
.button { width: 100%; padding: 10px; }
</style>
</head>
<body>
<div class="container">
<h1>Submit Your Form</h1>
<form id="myForm">
<input type="text" name="name" placeholder="Enter your name" required></input>
<button class="button" type="submit">Submit</button>
</form>
</div>
<script>
const confetti = new Confetti();
document.getElementById('myForm').addEventListener('submit', (e) => {
e.preventDefault();
confetti.start();
setTimeout(() => {
confetti.stop();
alert('Form submitted successfully!');
}, 3000);
});
</script>
</body>
</html>
Adding Confetti.js to your web applications can make ordinary events feel special. With its simple API and broad flexibility, you can customize it to fit the celebration needs of your site.
Hash: e985a288716cb57995dbbcbbd3813ad2b9483b90a2348b30b88a09b4ca0d252c
