五彩纸屑/礼炮效果

五彩纸屑/彩色纸屑/礼包通常用于巡游,运动会等庆祝活动,特别是婚礼庆祝上。

我第一次看到这个效果的,还是在flart.studio的扩展介绍页面上(标注为new的扩展才加载此效果)。纸屑在页面两侧喷洒出来。

五彩纸屑效果 礼炮效果

查了一下,特效是使用这个库:https://github.com/catdad/canvas-confetti

把它放在野草工作室试试效果

五彩纸屑效果 礼炮效果

效果还不错

  1. <script>
  2. ! function(t, e) {
  3.     ! function t(e, n, a, o) {
  4.         var i = !!(e.Worker && e.Blob && e.Promise && e.OffscreenCanvas && e.OffscreenCanvasRenderingContext2D && e.HTMLCanvasElement && e.HTMLCanvasElement.prototype.transferControlToOffscreen && e.URL && e.URL.createObjectURL);

  5.         function r() {}

  6.         function l(t) {

  7.             var a = n.exports.Promise,

  8.                 o = void 0 !== a ? a : e.Promise;

  9.             return "function" == typeof o ? new o(t) : (t(r, r), null)

  10.         }

  11.         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) {

  12.                 var e = Math.random();

  13.                 return u[e] = requestAnimationFrame(function n(a) {

  14.                     d === a || d + f - 1 < a ? (d = a, delete u[e], t()) : u[e] = requestAnimationFrame(n)

  15.                 }), e

  16.             }, s = function(t) {

  17.                 u[t] && cancelAnimationFrame(u[t])

  18.             }) : (c = function(t) {

  19.                 return setTimeout(t, f)

  20.             }, s = function(t) {

  21.                 return clearTimeout(t)

  22.             }), {

  23.                 frame: c,

  24.                 cancel: s

  25.             }),

  26.             v = (m = {}, function() {

  27.                 if (h) return h;

  28.                 if (!a && i) {

  29.                     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");

  30.                     try {

  31.                         h = new Worker(URL.createObjectURL(new Blob([e])))

  32.                     } catch (t) {

  33.                         return void 0 !== typeof console && "function" == typeof console.warn && console.warn("? Could not load worker", t), null

  34.                     }! function(t) {

  35.                         function e(e, n) {

  36.                             t.postMessage({

  37.                                 options: e || {},

  38.                                 callback: n

  39.                             })

  40.                         }

  41.                         t.init = function(e) {

  42.                             var n = e.transferControlToOffscreen();

  43.                             t.postMessage({

  44.                                 canvas: n

  45.                             }, [n])

  46.                         }, t.fire = function(n, a, o) {

  47.                             if (g) return e(n, null), g;

  48.                             var i = Math.random().toString(36).slice(2);

  49.                             return g = l(function(a) {

  50.                                 function r(e) {

  51.                                     e.data.callback === i && (delete m[i], t.removeEventListener("message", r), g = null, o(), a())

  52.                                 }

  53.                                 t.addEventListener("message", r), e(n, i), m[i] = r.bind(null, {

  54.                                     data: {

  55.                                         callback: i

  56.                                     }

  57.                                 })

  58.                             })

  59.                         }, t.reset = function() {

  60.                             for (var e in t.postMessage({

  61.                                     reset: !0

  62.                                 }), m) m[e](), delete m[e]

  63.                         }

  64.                     }(h)

  65.                 }

  66.                 return h

  67.             }),

  68.             p = {

  69.                 particleCount: 50,

  70.                 angle: 90,

  71.                 spread: 45,

  72.                 startVelocity: 45,

  73.                 decay: .9,

  74.                 gravity: 1,

  75.                 drift: 0,

  76.                 ticks: 200,

  77.                 x: .5,

  78.                 y: .5,

  79.                 shapes: ["square", "circle"],

  80.                 zIndex: 100,

  81.                 colors: ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42", "#ffa62d", "#ff36ff"],

  82.                 disableForReducedMotion: !1,

  83.                 scalar: 1

  84.             };

  85.         function y(t, e, n) {

  86.             return function(t, e) {

  87.                 return n ? n(t) : t

  88.             }(t && null != t[e] ? t[e] : p[e])

  89.         }

  90.         function w(t) {

  91.             return t < 0 ? 0 : Math.floor(t)

  92.         }

  93.         function M(t) {

  94.             return parseInt(t, 16)

  95.         }

  96.         function x(t) {

  97.             return t.map(C)

  98.         }

  99.         function C(t) {

  100.             var e = String(t).replace(/[^0-9a-f]/gi, "");

  101.             return e.length < 6 && (e = e[0] + e[0] + e[1] + e[1] + e[2] + e[2]), {

  102.                 r: M(e.substring(0, 2)),

  103.                 g: M(e.substring(2, 4)),

  104.                 b: M(e.substring(4, 6))

  105.             }

  106.         }

  107.         function k(t) {

  108.             t.width = document.documentElement.clientWidth, t.height = document.documentElement.clientHeight

  109.         }

  110.         function I(t) {

  111.             var e = t.getBoundingClientRect();

  112.             t.width = e.width, t.height = e.height

  113.         }

  114.         function T(t, e, n, i, r) {

  115.             var c, s, f = e.slice(),

  116.                 u = t.getContext("2d"),

  117.                 d = l(function(e) {

  118.                         function l() {

  119.                             c = s = null, u.clearRect(0, 0, i.width, i.height), r(), e()

  120.                         }

  121.                         c = b.frame(function e() {

  122.                                 !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) {

  123.                                         return function(t, e) {

  124.                                             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);

  125.                                             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/

  126.                                             10 * e.wobble, 0, 2 * Math.PI): function(t, e, n, a, o, i, r, l, c) {

  127.                                             t.save(), t.translate(e, n), t.rotate(i), t.scale(a, o), t.arc(0, 0, 1, 0, l, void 0), t.restore()

  128.                                         }(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

  129.                                     }(u, t)

  130.                                 })).length ? c = b.frame(e) : l()

  131.                         }), s = l

  132.                 });

  133.         return {

  134.             addFettis: function(t) {

  135.                 return f = f.concat(t), d

  136.             },

  137.             canvas: t,

  138.             promise: d,

  139.             reset: function() {

  140.                 c && b.cancel(c), s && s()

  141.             }

  142.         }

  143.     }

  144.     function E(t, n) {

  145.         var a, o = !t,

  146.             r = !!y(n || {}, "resize"),

  147.             c = y(n, "disableForReducedMotion", Boolean),

  148.             s = i && y(n || {}, "useWorker") ? v() : null,

  149.             f = o ? k : I,

  150.             u = !(!t || !s || !t.__confetti_initialized),

  151.             d = "function" == typeof matchMedia && matchMedia("(prefers-reduced-motion)").matches;

  152.         function h(n) {

  153.             var i = c || y(n, "disableForReducedMotion", Boolean),

  154.                 h = y(n, "zIndex", Number);

  155.             if (i && d) return l(function(t) {

  156.                 t()

  157.             });

  158.             o && a ? t = a.canvas : o && !t && (t = function(t) {

  159.                 var e = document.createElement("canvas");

  160.                 return e.style.position = "fixed", e.style.top = "0px", e.style.left = "0px", e.style.pointerEvents = "none", e.style.zIndex = t, e

  161.             }(h), document.body.appendChild(t)), r && !u && f(t);

  162.             var g = {

  163.                 width: t.width,

  164.                 height: t.height

  165.             };

  166.             function m() {

  167.                 if (s) {

  168.                     var e = {

  169.                         getBoundingClientRect: function() {

  170.                             if (!o) return t.getBoundingClientRect()

  171.                         }

  172.                     };

  173.                     return f(e), void s.postMessage({

  174.                         resize: {

  175.                             width: e.width,

  176.                             height: e.height

  177.                         }

  178.                     })

  179.                 }

  180.                 g.width = g.height = null

  181.             }

  182.             function b() {

  183.                 a = null, r && e.removeEventListener("resize", m), o && t && (document.body.removeChild(t), t = null, u = !1)

  184.             }

  185.             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) {

  186.                 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) {

  187.                         var e = y(t, "origin", Object);

  188.                         return e.x = y(e, "x", Number), e.y = y(e, "y", Number), e

  189.                     }(e), I = s, E = [], S = t.width * k.x, F = t.height * k.y; I--;) E.push((r = (i = {

  190.                     x: S,

  191.                     y: F,

  192.                     angle: u,

  193.                     spread: d,

  194.                     startVelocity: h,

  195.                     color: v[I % v.length],

  196.                     shape: M[(c = M.length, Math.floor(Math.random() * (c - 0)) + 0)],

  197.                     ticks: p,

  198.                     decay: g,

  199.                     gravity: m,

  200.                     drift: b,

  201.                     scalar: C

  202.                 }).angle * (Math.PI / 180), l = i.spread * (Math.PI / 180), {

  203.                     x: i.x,

  204.                     y: i.y,

  205.                     wobble: 10 * Math.random(),

  206.                     velocity: .5 * i.startVelocity + Math.random() * i.startVelocity,

  207.                     angle2D: -r + (.5 * l - Math.random() * l),

  208.                     tiltAngle: Math.random() * Math.PI,

  209.                     color: i.color,

  210.                     shape: i.shape,

  211.                     tick: 0,

  212.                     totalTicks: i.ticks,

  213.                     decay: i.decay,

  214.                     drift: i.drift,

  215.                     random: Math.random() + 5,

  216.                     tiltSin: 0,

  217.                     tiltCos: 0,

  218.                     wobbleX: 0,

  219.                     wobbleY: 0,

  220.                     gravity: 3 * i.gravity,

  221.                     ovalScalar: .6,

  222.                     scalar: i.scalar

  223.                 }));

  224.                 return a ? a.addFettis(E) : (a = T(t, E, f, n, o)).promise

  225.             }(n, g, b)

  226.         }

  227.         return h.reset = function() {

  228.             s && s.reset(), a && a.reset()

  229.         }, h

  230.     }

  231.     n.exports = E(null, {

  232.         useWorker: !0,

  233.         resize: !0

  234.     }), n.exports.create = E

  235. }(function() {

  236.     return void 0 !== t ? t : "undefined" != typeof self ? self : this || {}

  237. }(), e, !1), t.confetti = e.exports

  238. }(window, {}), window.onload = function() {

  239.     var t = Date.now() + 2e3,

  240.         e = ["#bb0000", "#ffffff"];

  241.     ! function n() {

  242.         confetti({

  243.             particleCount: 2,

  244.             angle: 60,

  245.             spread: 55,

  246.             origin: {

  247.                 x: 0

  248.             },

  249.             colors: e

  250.         }), confetti({

  251.             particleCount: 2,

  252.             angle: 120,

  253.             spread: 55,

  254.             origin: {

  255.                 x: 1

  256.             },

  257.             colors: e

  258.         }), Date.now() < t && requestAnimationFrame(n)

  259.     }()

  260. };

  261. </script>