נוסיף את הקוד הבא לווידג'ט HTML.
לכפתור במתקדם נשים ID עם הערך "mybtn"
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
<button onclick="startConfetti()" id ="mybtn">לחצו עליי</button>
<style>
#mybtn{
border: none;
outline: none;
background-color: #0B1126;
color: white;
}
#mybtn:hover{
background-color: white;
color: #0B1126;
}
</style>
<script>
function startConfetti() {
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 },
});
}
</script>
והנה התוצאה:
ניתן לראות דוגמאות קונפטי נוספות בלחיצה כאן
אם נרצה שהקונפטי יופיע בפתיחת העמוד נשים את הקוד הבא:
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 },
});
});
</script>