-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathconfetti.html
66 lines (62 loc) · 2.34 KB
/
confetti.html
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
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>confetti</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<body>
<script>
// const myCanvas = document.createElement("canvas");
// document.body.appendChild(myCanvas);
// const myConfetti = confetti.create(myCanvas, {
// resize: true,
// useWorker: true
// });
// myConfetti({
// particleCount: 100,
// spread: 160
// // any other options from the global
// // confetti function
// });
(function() {
const e = Date.now() + 3e3, // 当前时间加3s
t = {
startVelocity: 30, // 开始速度
spread: 360, // 数值(默认值:45):纸屑偏离中心的程度。45意味着五彩纸屑将以确定的正负22.5度的角度发射。
ticks: 60, // 数量(默认值:200):纸屑移动的次数。这是抽象的…但如果五彩纸屑对你来说消失得太快，那就玩吧。
zIndex: 0, // 整数(默认值:100):纸屑应该在最上面。但如果你有一个疯狂的高页，你可以设置更高。
};
function l(e, t) {
return Math.random() * (t - e) + e;
}
const a = setInterval(function() {
const o = e - Date.now();
if (o <= 0) return clearInterval(a);
const s = (o / 3e3) * 50;
confetti(
Object.assign({}, t, {
particleCount: s, // Integer (默认值: 50) : 要启动的五彩纸屑数量。更多总是很有趣... 但是要冷静，这涉及到很多数学问题。
origin: {
x: l(0.1, 0.3),
y: Math.random() - 0.2,
}, // origin 对象: 从哪里开始发射五彩纸屑。如果愿意，可以在屏幕外发射。
})
),
confetti(
Object.assign({}, t, {
particleCount: s,
origin: {
x: l(0.7, 0.9),
y: Math.random() - 0.2,
},
})
);
}, 300);
})();
</script>
<style></style>
</body>
</html>