Añade efectos de confeti en cualquier página de tu sitio web. Los efectos de confeti pueden hacer que tu web sea más atractiva y divertida, o simplemente darle un toque de animación.
El código te permite añadir 8 efectos diferentes de confeti. Cada efecto tiene su propio estilo y comportamiento, desde confeti que cae lentamente desde la parte superior de la pantalla hasta explosiones de confeti que llenan toda la pantalla.
¿Cómo se usa el efecto confetti?
Para usar esta función, simplemente tienes que insertar un shortcode en la página donde quieras que aparezca el confeti. El shortcode tiene dos atributos: ‘efecto’ y ‘demo’.
Usa la demo:
El atributo ‘demo‘ es opcional y te permite mostrar botones para cada uno de los 8 efectos de confeti. Úsalo solo para saber que tipo de confeti quieres usar y luego quítalo para ocultar los botones.
Ahora mismo estoy probando la demo justo aquí:
Shorcode final:
El atributo ‘efecto‘ te permite elegir el tipo de efecto de confeti que quieres mostrar. Puedes elegir entre 8 opciones, cada una con su propio estilo único.
En resumen, este código te permite añadir un toque animado a tu web con efectos de confetti.
function confetti_shortcode($atts) {
$atts = shortcode_atts(
array(
'efecto' => '1',
'demo' => 'no',
), $atts, 'confetti' );
ob_start();
?>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2"></script>
<script>
function createConfetti(efecto) {
switch(efecto) {
case '1':
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 }
});
break;
case '2':
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
confetti({
angle: randomInRange(55, 125),
spread: randomInRange(50, 70),
particleCount: randomInRange(50, 100),
origin: { y: 0.6 }
});
break;
case '3':
var count = 200;
var defaults = {
origin: { y: 0.7 }
};
function fire(particleRatio, opts) {
confetti(Object.assign({}, defaults, opts, {
particleCount: Math.floor(count * particleRatio)
}));
}
fire(0.25, {
spread: 26,
startVelocity: 55,
});
fire(0.2, {
spread: 60,
});
fire(0.35, {
spread: 100,
decay: 0.91,
scalar: 0.8
});
fire(0.1, {
spread: 120,
startVelocity: 25,
decay: 0.92,
scalar: 1.2
});
fire(0.1, {
spread: 120,
startVelocity: 45,
});
break;
case '4':
var defaults = {
spread: 360,
ticks: 50,
gravity: 0,
decay: 0.94,
startVelocity: 30,
shapes: ['star'],
colors: ['FFE400', 'FFBD00', 'E89400', 'FFCA6C', 'FDFFB8']
};
function shoot() {
confetti({
...defaults,
particleCount: 40,
scalar: 1.2,
shapes: ['star']
});
confetti({
...defaults,
particleCount: 10,
scalar: 0.75,
shapes: ['circle']
});
}
setTimeout(shoot, 0);
setTimeout(shoot, 100);
setTimeout(shoot, 200);
break;
case '5':
var duration = 15 * 1000;
var animationEnd = Date.now() + duration;
var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
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.3), y: Math.random() - 0.2 } }));
confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
}, 250);
break;
case '6':
var duration = 15 * 1000;
var animationEnd = Date.now() + duration;
var skew = 1;
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
(function frame() {
var timeLeft = animationEnd - Date.now();
var ticks = Math.max(200, 500 * (timeLeft / duration));
skew = Math.max(0.8, skew - 0.001);
confetti({
particleCount: 1,
startVelocity: 0,
ticks: ticks,
origin: {
x: Math.random(),
y: (Math.random() * skew) - 0.2
},
colors: ['#ffffff'],
shapes: ['circle'],
gravity: randomInRange(0.4, 0.6),
scalar: randomInRange(0.4, 1),
drift: randomInRange(-0.4, 0.4)
});
if (timeLeft > 0) {
requestAnimationFrame(frame);
}
}());
break;
case '7':
var end = Date.now() + (15 * 1000);
var colors = ['#bb0000', '#ffffff'];
(function frame() {
confetti({
particleCount: 2,
angle: 60,
spread: 55,
origin: { x: 0 },
colors: colors
});
confetti({
particleCount: 2,
angle: 120,
spread: 55,
origin: { x: 1 },
colors: colors
});
if (Date.now() < end) {
requestAnimationFrame(frame);
}
}());
break;
case '8':
var canvas = document.getElementById('my-canvas');
canvas.confetti = canvas.confetti || confetti.create(canvas, { resize: true });
canvas.confetti({
spread: 70,
origin: { y: 1.2 }
});
break;
}
}
</script>
<?php
if ($atts['demo'] === 'si') {
?>
<center>
<button onclick="createConfetti('1')">Efecto 1</button>
<button onclick="createConfetti('2')">Efecto 2</button>
<button onclick="createConfetti('3')">Efecto 3</button>
<button onclick="createConfetti('4')">Efecto 4</button>
<button onclick="createConfetti('5')">Efecto 5</button>
<button onclick="createConfetti('6')">Efecto 6</button>
<button onclick="createConfetti('7')">Efecto 7</button>
<button onclick="createConfetti('8')">Efecto 8</button>
</center>
<?php
} else {
?>
<script>
createConfetti("<?php echo $atts['efecto']; ?>");
</script>
<?php
}
return ob_get_clean();
}
add_shortcode('confetti', 'confetti_shortcode');
Gracias a: Canvas Confetti
