Svelte チュートリアルを完了しました。これで構築を開始できます。
チュートリアルの次の 2 つのパートでは、あらゆる種類や規模のアプリを作成するための本格的なフレームワークである SvelteKit に焦点を当てます。
情報過負荷に陥っていて、まだ SvelteKit チュートリアルを進める準備ができていない場合でも、心配しないでください。SvelteKit のすべてを学ぶことなく、既存の Svelte の知識を使用できます。ターミナルでこれを実行し、プロンプトに従ってください...
npx sv create...そして src/routes/+page.svelte の編集を開始します。準備ができたら、下のリンクをクリックして旅を続けてください。
前へ 次へ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script>
let characters = ['🥳', '🎉', '✨'];
let confetti = $state(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));
$effect(() => { let frame = requestAnimationFrame(function loop() {frame = requestAnimationFrame(loop);
for (const confetto of confetti) {confetto.y += 0.3 * confetto.r;
if (confetto.y > 120) confetto.y = -20;
}
});
return () => {cancelAnimationFrame(frame);
}
});
</script>
{#each confetti as c}<span
style:left="{c.x}%" style:top="{c.y}%" style:scale={c.r}>
{c.character}</span>
{/each}<style>
span {position: absolute;
font-size: 5vw;
user-select: none;
}
:global(body) {overflow: hidden;
}
</style>