Here's some samples for putting confetti on your UpViral campaign.
First, you want to put these ONLY on the sharing page in the Advanced settings section. AND – put the script in the “Social Share Page Footer codes” section (not in the header – not 100% sure why, but the confetti won't load if in the header).
Instructions
Confetti – comes from left and right
<!-- Confetti from Mitch Aunger and source: https://www.kirilv.com/canvas-confetti/ -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script type="text/javascript">
// change duration here - first number is the number of seconds you want the confetti to display
var duration = 3 * 1000;
var end = Date.now() + duration;
(function frame() {
// launch a few confetti from the left edge
confetti({
particleCount: 7,
angle: 60,
spread: 55,
origin: { x: 0 }
});
// and launch a few from the right edge
confetti({
particleCount: 7,
angle: 120,
spread: 55,
origin: { x: 1 }
});
// keep going until we are out of time
if (Date.now() < end) {
requestAnimationFrame(frame);
}
}());</script>
confetti – pops randomly on the page (like fireworks)
<!-- Fireworks (random) confetti from Mitch Aunger and original source: https://www.kirilv.com/canvas-confetti/ -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script type="text/javascript">
// change duration here - first number is the number of seconds you want the confetti to display
var duration = 10 * 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 = 100 * (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>
General confetti – comes from left and right
<!-- Confetti from Mitch Aunger and source: https://www.kirilv.com/canvas-confetti/ -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script type="text/javascript">
// do this for 3 seconds
var duration = 3 * 1000;
var end = Date.now() + duration;
(function frame() {
// launch a few confetti from the left edge
confetti({
particleCount: 7,
angle: 60,
spread: 55,
origin: { x: 0 }
});
// and launch a few from the right edge
confetti({
particleCount: 7,
angle: 120,
spread: 55,
origin: { x: 1 }
});
// keep going until we are out of time
if (Date.now() < end) {
requestAnimationFrame(frame);
}
}());</script>