Confetti for the page background
table of contents
The following code enables colored confetti in the page background
Just copy and paste. Enjoy.
Confetti that automatically plays when the page loads
You can change the duration and load of the confetti
<script>
function launchConfetti() {
var duration = 4 * 1000; // משך הזמן במילישניות
var animationEnd = Date.now() + duration;
var defaults = { startVelocity: 50, spread: 80, ticks: 100, zIndex: 9999 };
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
var interval = setInterval(function() {
var timeLeft = animationEnd - Date.now();
if (timeLeft <= 0) {
return clearInterval(interval);
}
var particleCount = 80 * (timeLeft / duration); // יותר קונפטי
confetti(Object.assign({}, defaults, {
particleCount,
origin: { x: 0, y: randomInRange(0.2, 0.8) } // צד שמאל
}));
confetti(Object.assign({}, defaults, {
particleCount,
origin: { x: 1, y: randomInRange(0.2, 0.8) } // צד ימין
}));
}, 200);
}
// הפעלת הקונפטי מיד עם טעינת העמוד
document.addEventListener("DOMContentLoaded", function() {
launchConfetti();
});
</script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1"></script>
Confetti activated at the push of a button
In the button section, select Listen to the button you want.
<script>
function launchConfetti() {
var duration = 3 * 1000; // משך הזמן במילישניות
var animationEnd = Date.now() + duration;
var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 9999 };
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
var interval = setInterval(function() {
var timeLeft = animationEnd - Date.now();
if (timeLeft <= 0) {
return clearInterval(interval);
}
var particleCount = 50 * (timeLeft / duration);
confetti(Object.assign({}, defaults, {
particleCount,
origin: { x: randomInRange(0.1, 0.9), y: Math.random() - 0.2 }
}));
}, 250);
}
// הפעלת הקונפטי בעת לחיצה על כפתור
document.addEventListener("DOMContentLoaded", function() {
document.body.addEventListener("click", launchConfetti);
});
</script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1"></script>
Confetti triggered by submitting an Elementor form
<script>
function launchConfetti() {
var duration = 4 * 1000; // משך הזמן במילישניות
var animationEnd = Date.now() + duration;
var defaults = { startVelocity: 50, spread: 80, ticks: 100, zIndex: 9999 };
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
var interval = setInterval(function() {
var timeLeft = animationEnd - Date.now();
if (timeLeft <= 0) {
return clearInterval(interval);
}
var particleCount = 80 * (timeLeft / duration); // יותר קונפטי
confetti(Object.assign({}, defaults, {
particleCount,
origin: { x: 0, y: randomInRange(0.2, 0.8) } // צד שמאל
}));
confetti(Object.assign({}, defaults, {
particleCount,
origin: { x: 1, y: randomInRange(0.2, 0.8) } // צד ימין
}));
}, 200);
}
// מאזין לשליחת טופס מוצלחת באלמנטור
document.addEventListener("DOMContentLoaded", function() {
jQuery(document).on("elementor/popup/show", function(event, id) {
jQuery(document).on("submit_success", function(event) {
launchConfetti();
});
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1"></script>
