Skip to content

Commit 060b466

Browse files
Shreekant-04Shreekant-04
committed
confetti effect added.
1 parent 40365f3 commit 060b466

File tree

5 files changed

+170
-0
lines changed

5 files changed

+170
-0
lines changed

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -283,5 +283,10 @@
283283
<td><a href="animation-illusion-jelly">animation-illusion-jelly</a></td>
284284
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/animation-illusion-jelly/">Link</a></td>
285285
</tr>
286+
<tr>
287+
<td>55</td>
288+
<td><a href="confetti effect">Confetti effect</a></td>
289+
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/confetti effect/">Link</a></td>
290+
</tr>
286291
</tbody>
287292
</table>

‎confetti effect/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Confetti Celebration</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="shortcut icon" href="/time-management.ico" type="image/x-icon" />
9+
10+
</head>
11+
<body>
12+
<div class="wrapper">
13+
<button onclick="launchConfetti()">Celebrate with Fruits!</button>
14+
<button onclick="launchConfetti2()">Celebrate with Stars</button>
15+
<button onclick="launchConfetti3()">Celebrate </button>
16+
<button onclick="fireworks()">Fireworks</button>
17+
</div>
18+
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/[email protected]/tsparticles.confetti.bundle.min.js"></script>
19+
<script src="script.js"></script>
20+
</body>
21+
</html>

‎confetti effect/script.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
function launchConfetti() {
2+
confetti({
3+
spread: 360,
4+
ticks: 200,
5+
gravity: 1,
6+
decay: 0.94,
7+
startVelocity: 30,
8+
particleCount: 100,
9+
scalar: 3,
10+
shapes: ["image"],
11+
shapeOptions: {
12+
image: [
13+
{ src: "https://particles.js.org/images/fruits/apple.png", width: 32, height: 32 },
14+
{ src: "https://particles.js.org/images/fruits/avocado.png", width: 32, height: 32 },
15+
{ src: "https://particles.js.org/images/fruits/banana.png", width: 32, height: 32 },
16+
{ src: "https://particles.js.org/images/fruits/berries.png", width: 32, height: 32 },
17+
{ src: "https://particles.js.org/images/fruits/cherry.png", width: 32, height: 32 },
18+
{ src: "https://particles.js.org/images/fruits/grapes.png", width: 32, height: 32 },
19+
{ src: "https://particles.js.org/images/fruits/lemon.png", width: 32, height: 32 },
20+
{ src: "https://particles.js.org/images/fruits/orange.png", width: 32, height: 32 },
21+
{ src: "https://particles.js.org/images/fruits/peach.png", width: 32, height: 32 },
22+
{ src: "https://particles.js.org/images/fruits/pear.png", width: 32, height: 32 },
23+
{ src: "https://particles.js.org/images/fruits/pepper.png", width: 32, height: 32 },
24+
{ src: "https://particles.js.org/images/fruits/plum.png", width: 32, height: 32 },
25+
{ src: "https://particles.js.org/images/fruits/star.png", width: 32, height: 32 },
26+
{ src: "https://particles.js.org/images/fruits/strawberry.png", width: 32, height: 32 },
27+
{ src: "https://particles.js.org/images/fruits/watermelon.png", width: 32, height: 32 },
28+
{ src: "https://particles.js.org/images/fruits/watermelon_slice.png", width: 32, height: 32 },
29+
],
30+
},
31+
});
32+
}
33+
34+
function launchConfetti2() {
35+
confetti({
36+
spread: 360,
37+
ticks: 200,
38+
gravity: 1,
39+
decay: 0.94,
40+
startVelocity: 30,
41+
particleCount: 100,
42+
scalar: 1,
43+
shapes: ["star"],
44+
});
45+
}
46+
47+
function launchConfetti3() {
48+
confetti({
49+
spread: 360,
50+
ticks: 200,
51+
gravity: 1,
52+
decay: 0.94,
53+
startVelocity: 30,
54+
particleCount: 100,
55+
scalar: 1,
56+
shapes: ["square", "circle"],
57+
});
58+
}
59+
60+
function fireworks() {
61+
const duration = 15 * 1000,
62+
animationEnd = Date.now() + duration,
63+
defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
64+
65+
function randomInRange(min, max) {
66+
return Math.random() * (max - min) + min;
67+
}
68+
69+
const interval = setInterval(function () {
70+
const timeLeft = animationEnd - Date.now();
71+
72+
if (timeLeft <= 0) {
73+
return clearInterval(interval);
74+
}
75+
76+
const particleCount = 50 * (timeLeft / duration);
77+
78+
confetti(
79+
Object.assign({}, defaults, {
80+
particleCount,
81+
origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
82+
})
83+
);
84+
confetti(
85+
Object.assign({}, defaults, {
86+
particleCount,
87+
origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
88+
})
89+
);
90+
}, 250);
91+
}

‎confetti effect/style.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
body {
2+
margin: 0;
3+
overflow: hidden;
4+
background-color: #f0f0f0;
5+
height: 100vh;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
font-family: 'Arial', sans-serif;
10+
}
11+
12+
.wrapper {
13+
display: grid;
14+
grid-template-columns: repeat(2, 1fr);
15+
gap: 10px;
16+
padding: 20px;
17+
}
18+
19+
button {
20+
padding: 15px 25px;
21+
font-size: 18px;
22+
cursor: pointer;
23+
border: none;
24+
border-radius: 5px;
25+
transition: background-color 0.3s;
26+
}
27+
28+
button:hover {
29+
background-color: #ddd;
30+
}
31+
32+
button:active {
33+
transform: scale(0.95);
34+
}
35+
36+
@media (max-width: 600px) {
37+
.wrapper {
38+
grid-template-columns: 1fr;
39+
gap: 15px;
40+
}
41+
42+
button {
43+
font-size: 16px;
44+
padding: 10px 20px;
45+
}
46+
}

‎index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -406,6 +406,13 @@
406406
<a href="./animation-illusion-jelly/" target="_blank">Link</a>
407407
</td>
408408
</tr>
409+
<tr>
410+
<td>55</td>
411+
<td>Confetti effect</td>
412+
<td>
413+
<a href="./confetti effect/" target="_blank">Link</a>
414+
</td>
415+
</tr>
409416
</tbody>
410417
</table>
411418
</body>

0 commit comments

Comments
 (0)