<main>
<button id="Trigger">紙吹雪</button>
</main>
* {
margin: 0;
padding: 0;
}
main {
position: relative;
display: block;
width: 100%;
height: 100vh;
background-color: black;
}
button {
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
padding: 8px;
border: none;
border-radius: 4px;
background-color: white;
}
document.getElementById('Trigger').addEventListener('click', () => {
var count = 500;
var colors = ['#ddde31', '#aea700', '#dfd136', '#dddbdc'];
var defaults = {
angle: 90,
spread: 180,
startVelocity: 60,
origin: {
x: 0.5,
y: 0.8
},
colors: colors
};
function fire(particleRatio, opts) {
confetti({
...defaults,
...opts,
particleCount: Math.floor(count * particleRatio)
});
}
fire(0.25, {
spread: 26,
startVelocity: 55,
});
fire(0.2, {
spread: 60,
});
fire(0.35, {
spread: 100,
scalar: 0.8
});
fire(0.1, {
startVelocity: 25,
decay: 0.92,
scalar: 1.2
});
fire(0.1, {
spread: 120,
startVelocity: 45,
});
// particleRatioが全部で1、particleCountが500になるようにしています
});
This Pen doesn't use any external CSS resources.