ANIMATION SYSTEME.IO PETITE EXPLOSION DE CONFETTI

Veillez à placer le code HTML ci-dessous en glisser-déposer dans la page Systeme.io afin de l'animer.


Vous n'avez qu'à copier-coller ce code et à l'intégrer à la page à travers l'élément CODE HTML éditable dans le menu de gauche.

<script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.12.0/tsparticles.confetti.bundle.min.js"></script>


<script>

const duration = 4 * 1000,

animationEnd = Date.now() + duration,

defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };


function randomInRange(min, max) {

return Math.random() * (max - min) + min;

}


const interval = setInterval(function() {

const timeLeft = animationEnd - Date.now();


if (timeLeft <= 0) {

return clearInterval(interval);

}


const particleCount = 50 * (timeLeft / duration);


// since particles fall down, start a bit higher than random

confetti(

Object.assign({}, defaults, {

particleCount,

origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },

})

);

confetti(

Object.assign({}, defaults, {

particleCount,

origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },

})

);

}, 250);

</script>