mirror of https://github.com/sveltejs/svelte
parent
56f0245395
commit
3b564cb8bf
@ -0,0 +1,49 @@
|
||||
<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>
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
font-size: 5vw;
|
||||
}
|
||||
</style>
|
||||
|
||||
{#each confetti as c}
|
||||
<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
|
||||
{/each}
|
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Congratulations!
|
||||
---
|
||||
|
||||
You've now finished the Svelte tutorial and are ready to start building apps. You can refer back to individual chapters at any time (click the title above to reveal a dropdown) or continue your learning via the [API reference](docs), [Examples](examples) and [Blog](blog). If you're a Twitter user, you can get updates via [@sveltejs](https://twitter.com/sveltejs).
|
||||
|
||||
To get set up in your local development environment, check out [the quickstart guide](blog/the-easiest-way-to-get-started).
|
||||
|
||||
If you're looking for a more expansive framework that includes routing, server-side rendering and everything else, take a look at [Sapper](https://sapper.svelte.technology).
|
||||
|
||||
Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](https://discord.gg/yy75DKs). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.
|
@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "Next steps"
|
||||
}
|
Loading…
Reference in new issue