五彩纸屑/礼炮效果
五彩纸屑/彩色纸屑/礼包通常用于巡游，运动会等庆祝活动，特别是婚礼庆祝上。
我第一次看到这个效果的，还是在flart.studio的扩展介绍页面上（标注为new的扩展才加载此效果）。纸屑在页面两侧喷洒出来。
查了一下，特效是使用这个库：https://github.com/catdad/canvas-confetti
把它放在野草工作室试试效果
效果还不错
- <script>
- ! function(t, e) {
- ! function t(e, n, a, o) {
- var i = !!(e.Worker && e.Blob && e.Promise && e.OffscreenCanvas && e.OffscreenCanvasRenderingContext2D && e.HTMLCanvasElement && e.HTMLCanvasElement.prototype.transferControlToOffscreen && e.URL && e.URL.createObjectURL);
function r() {}
function l(t) {
var a = n.exports.Promise,
o = void 0 !== a ? a : e.Promise;
return "function" == typeof o ? new o(t) : (t(r, r), null)
}
var c, s, f, u, d, h, g, m, b = (f = Math.floor(1e3 / 60), u = {}, d = 0, "function" == typeof requestAnimationFrame && "function" == typeof cancelAnimationFrame ? (c = function(t) {
var e = Math.random();
return u[e] = requestAnimationFrame(function n(a) {
d === a || d + f - 1 < a ? (d = a, delete u[e], t()) : u[e] = requestAnimationFrame(n)
}), e
}, s = function(t) {
u[t] && cancelAnimationFrame(u[t])
}) : (c = function(t) {
return setTimeout(t, f)
}, s = function(t) {
return clearTimeout(t)
}), {
frame: c,
cancel: s
}),
v = (m = {}, function() {
if (h) return h;
if (!a && i) {
var e = ["var CONFETTI, SIZE = {}, module = {};", "(" + t.toString() + ")(this, module, true, SIZE);", "onmessage = function(msg) {", " if (msg.data.options) {", " CONFETTI(msg.data.options).then(function () {", " if (msg.data.callback) {", " postMessage({ callback: msg.data.callback });", " }", " });", " } else if (msg.data.reset) {", " CONFETTI.reset();", " } else if (msg.data.resize) {", " SIZE.width = msg.data.resize.width;", " SIZE.height = msg.data.resize.height;", " } else if (msg.data.canvas) {", " SIZE.width = msg.data.canvas.width;", " SIZE.height = msg.data.canvas.height;", " CONFETTI = module.exports.create(msg.data.canvas);", " }", "}"].join("\n");
try {
h = new Worker(URL.createObjectURL(new Blob([e])))
} catch (t) {
return void 0 !== typeof console && "function" == typeof console.warn && console.warn("? Could not load worker", t), null
}! function(t) {
function e(e, n) {
t.postMessage({
options: e || {},
callback: n
})
}
t.init = function(e) {
var n = e.transferControlToOffscreen();
t.postMessage({
canvas: n
}, [n])
}, t.fire = function(n, a, o) {
if (g) return e(n, null), g;
var i = Math.random().toString(36).slice(2);
return g = l(function(a) {
function r(e) {
e.data.callback === i && (delete m[i], t.removeEventListener("message", r), g = null, o(), a())
}
t.addEventListener("message", r), e(n, i), m[i] = r.bind(null, {
data: {
callback: i
}
})
})
}, t.reset = function() {
for (var e in t.postMessage({
reset: !0
}), m) m[e](), delete m[e]
}
}(h)
}
return h
}),
p = {
particleCount: 50,
angle: 90,
spread: 45,
startVelocity: 45,
decay: .9,
gravity: 1,
drift: 0,
ticks: 200,
x: .5,
y: .5,
shapes: ["square", "circle"],
zIndex: 100,
colors: ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42", "#ffa62d", "#ff36ff"],
disableForReducedMotion: !1,
scalar: 1
};
function y(t, e, n) {
return function(t, e) {
return n ? n(t) : t
}(t && null != t[e] ? t[e] : p[e])
}
function w(t) {
return t < 0 ? 0 : Math.floor(t)
}
function M(t) {
return parseInt(t, 16)
}
function x(t) {
return t.map(C)
}
function C(t) {
var e = String(t).replace(/[^0-9a-f]/gi, "");
return e.length < 6 && (e = e[0] + e[0] + e[1] + e[1] + e[2] + e[2]), {
r: M(e.substring(0, 2)),
g: M(e.substring(2, 4)),
b: M(e.substring(4, 6))
}
}
function k(t) {
t.width = document.documentElement.clientWidth, t.height = document.documentElement.clientHeight
}
function I(t) {
var e = t.getBoundingClientRect();
t.width = e.width, t.height = e.height
}
function T(t, e, n, i, r) {
var c, s, f = e.slice(),
u = t.getContext("2d"),
d = l(function(e) {
function l() {
c = s = null, u.clearRect(0, 0, i.width, i.height), r(), e()
}
c = b.frame(function e() {
!a || i.width === o.width && i.height === o.height || (i.width = t.width = o.width, i.height = t.height = o.height), i.width || i.height || (n(t), i.width = t.width, i.height = t.height), u.clearRect(0, 0, i.width, i.height), (f = f.filter(function(t) {
return function(t, e) {
e.x += Math.cos(e.angle2D) * e.velocity + e.drift, e.y += Math.sin(e.angle2D) * e.velocity + e.gravity, e.wobble += .1, e.velocity *= e.decay, e.tiltAngle += .1, e.tiltSin = Math.sin(e.tiltAngle), e.tiltCos = Math.cos(e.tiltAngle), e.random = Math.random() + 5, e.wobbleX = e.x + 10 * e.scalar * Math.cos(e.wobble), e.wobbleY = e.y + 10 * e.scalar * Math.sin(e.wobble);
var n = e.tick++/e.totalTicks,a=e.x+e.random*e.tiltCos,o=e.y+e.random*e.tiltSin,i=e.wobbleX+e.random*e.tiltCos,r=e.wobbleY+e.random*e.tiltSin;return t.fillStyle="rgba("+e.color.r+", "+e.color.g+", "+e.color.b+", "+(1-n)+")",t.beginPath(),"circle"===e.shape?t.ellipse?t.ellipse(e.x,e.y,Math.abs(i-a)*e.ovalScalar,Math.abs(r-o)*e.ovalScalar,Math.PI/
10 * e.wobble, 0, 2 * Math.PI): function(t, e, n, a, o, i, r, l, c) {
t.save(), t.translate(e, n), t.rotate(i), t.scale(a, o), t.arc(0, 0, 1, 0, l, void 0), t.restore()
}(t, e.x, e.y, Math.abs(i - a) * e.ovalScalar, Math.abs(r - o) * e.ovalScalar, Math.PI / 10 * e.wobble, 0, 2 * Math.PI): (t.moveTo(Math.floor(e.x), Math.floor(e.y)), t.lineTo(Math.floor(e.wobbleX), Math.floor(o)), t.lineTo(Math.floor(i), Math.floor(r)), t.lineTo(Math.floor(a), Math.floor(e.wobbleY))), t.closePath(), t.fill(), e.tick < e.totalTicks
}(u, t)
})).length ? c = b.frame(e) : l()
}), s = l
});
return {
addFettis: function(t) {
return f = f.concat(t), d
},
canvas: t,
promise: d,
reset: function() {
c && b.cancel(c), s && s()
}
}
}
function E(t, n) {
var a, o = !t,
r = !!y(n || {}, "resize"),
c = y(n, "disableForReducedMotion", Boolean),
s = i && y(n || {}, "useWorker") ? v() : null,
f = o ? k : I,
u = !(!t || !s || !t.__confetti_initialized),
d = "function" == typeof matchMedia && matchMedia("(prefers-reduced-motion)").matches;
function h(n) {
var i = c || y(n, "disableForReducedMotion", Boolean),
h = y(n, "zIndex", Number);
if (i && d) return l(function(t) {
t()
});
o && a ? t = a.canvas : o && !t && (t = function(t) {
var e = document.createElement("canvas");
return e.style.position = "fixed", e.style.top = "0px", e.style.left = "0px", e.style.pointerEvents = "none", e.style.zIndex = t, e
}(h), document.body.appendChild(t)), r && !u && f(t);
var g = {
width: t.width,
height: t.height
};
function m() {
if (s) {
var e = {
getBoundingClientRect: function() {
if (!o) return t.getBoundingClientRect()
}
};
return f(e), void s.postMessage({
resize: {
width: e.width,
height: e.height
}
})
}
g.width = g.height = null
}
function b() {
a = null, r && e.removeEventListener("resize", m), o && t && (document.body.removeChild(t), t = null, u = !1)
}
return s && !u && s.init(t), u = !0, s && (t.__confetti_initialized = !0), r && e.addEventListener("resize", m, !1), s ? s.fire(n, g, b) : function(e, n, o) {
for (var i, r, l, c, s = y(e, "particleCount", w), u = y(e, "angle", Number), d = y(e, "spread", Number), h = y(e, "startVelocity", Number), g = y(e, "decay", Number), m = y(e, "gravity", Number), b = y(e, "drift", Number), v = y(e, "colors", x), p = y(e, "ticks", Number), M = y(e, "shapes"), C = y(e, "scalar"), k = function(t) {
var e = y(t, "origin", Object);
return e.x = y(e, "x", Number), e.y = y(e, "y", Number), e
}(e), I = s, E = [], S = t.width * k.x, F = t.height * k.y; I--;) E.push((r = (i = {
x: S,
y: F,
angle: u,
spread: d,
startVelocity: h,
color: v[I % v.length],
shape: M[(c = M.length, Math.floor(Math.random() * (c - 0)) + 0)],
ticks: p,
decay: g,
gravity: m,
drift: b,
scalar: C
}).angle * (Math.PI / 180), l = i.spread * (Math.PI / 180), {
x: i.x,
y: i.y,
wobble: 10 * Math.random(),
velocity: .5 * i.startVelocity + Math.random() * i.startVelocity,
angle2D: -r + (.5 * l - Math.random() * l),
tiltAngle: Math.random() * Math.PI,
color: i.color,
shape: i.shape,
tick: 0,
totalTicks: i.ticks,
decay: i.decay,
drift: i.drift,
random: Math.random() + 5,
tiltSin: 0,
tiltCos: 0,
wobbleX: 0,
wobbleY: 0,
gravity: 3 * i.gravity,
ovalScalar: .6,
scalar: i.scalar
}));
return a ? a.addFettis(E) : (a = T(t, E, f, n, o)).promise
}(n, g, b)
}
return h.reset = function() {
s && s.reset(), a && a.reset()
}, h
}
n.exports = E(null, {
useWorker: !0,
resize: !0
}), n.exports.create = E
}(function() {
return void 0 !== t ? t : "undefined" != typeof self ? self : this || {}
}(), e, !1), t.confetti = e.exports
}(window, {}), window.onload = function() {
var t = Date.now() + 2e3,
e = ["#bb0000", "#ffffff"];
! function n() {
confetti({
particleCount: 2,
angle: 60,
spread: 55,
origin: {
x: 0
},
colors: e
}), confetti({
particleCount: 2,
angle: 120,
spread: 55,
origin: {
x: 1
},
colors: e
}), Date.now() < t && requestAnimationFrame(n)
}()
};
</script>