קונפטי לרקע העמוד

תוכן עניינים

הקוד הבא מאפשר קונפטי צבעוני ברקע העמוד

פשוט לעשות העתק הדבק. תהנו

קונפטי שמופעל אוטומטית עם טעינת העמוד

אתם יכולים לשנות את משך הזמן והעומס של הקונפטי 

				
					<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>

				
			

קונפטי שמופעל בלחיצה על כפתור

בחלק של הכפתור בחרו האזנה לכפתור שתרצו

				
					<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>

				
			

קונפטי שמופעל בשליחת טופס אלמנטור

				
					<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>

				
			

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *