You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte

51 lines
890 B

<script>
import { onMount } from 'svelte';
let characters = ['🥳', '🎉', '✨'];
let confetti = new Array(100).fill()
.map((_, i) => {
return {
character: characters[i % characters.length],
x: Math.random() * 100,
y: -20 - Math.random() * 100,
r: 0.1 + Math.random() * 1
};
})
.sort((a, b) => a.r - b.r);
onMount(() => {
let frame;
function loop() {
frame = requestAnimationFrame(loop);
confetti = confetti.map(emoji => {
emoji.y += 0.7 * emoji.r;
if (emoji.y > 120) emoji.y = -20;
return emoji;
});
}
loop();
return () => cancelAnimationFrame(frame);
});
</script>
{#each confetti as c}
<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
{/each}
<style>
:global(body) {
overflow: hidden;
}
span {
position: absolute;
font-size: 5vw;
user-select: none;
}
</style>