https://fengyelab.cc/themes/theme-Joe3/assets/effect/bg/strips.js

1!(function () {
2  var canvas1, ctx, W, H;
3  var isStart = false;
4  if (screen.width >= 988) var mp = 150;
5  else mp = 75;
6  var deactivationTimerHandler,
7    reactivationTimerHandler,
8    animationHandler,
9    particles = [],
10    angle = 0,
11    tiltAngle = 0,
12    confettiActive = !0,
13    animationComplete = !0,
14    particleColors = {
15      colorOptions: [
16        "DodgerBlue",
17        "OliveDrab",
18        "Gold",
19        "pink",
20        "SlateBlue",
21        "lightblue",
22        "Violet",
23        "PaleGreen",
24        "SteelBlue",
25        "SandyBrown",
26        "Chocolate",
27        "Crimson",
28      ],
29      colorIndex: 0,
30      colorIncrementer: 0,
31      colorThreshold: 10,
32      getColor: function () {
33        return (
34          this.colorIncrementer >= 10 &&
35            ((this.colorIncrementer = 0),
36            this.colorIndex++,
37            this.colorIndex >= this.colorOptions.length &&
38              (this.colorIndex = 0)),
39          this.colorIncrementer++,
40          this.colorOptions[this.colorIndex]
41        );
42      },
43    };
44
45  function confettiParticle(t) {
46    (this.x = Math.random() * W),
47      (this.y = Math.random() * H - H),
48      (this.r = RandomFromTo(10, 30)),
49      (this.d = Math.random() * mp + 10),
50      (this.color = t),
51      (this.tilt = Math.floor(10 * Math.random()) - 10),
52      (this.tiltAngleIncremental = 0.07 * Math.random() + 0.05),
53      (this.tiltAngle = 0),
54      (this.draw = function () {
55        return (
56          ctx.beginPath(),
57          (ctx.lineWidth = this.r / 2),
58          (ctx.strokeStyle = this.color),
59          ctx.moveTo(this.x + this.tilt + this.r / 4, this.y),
60          ctx.lineTo(this.x + this.tilt, this.y + this.tilt + this.r / 4),
61          ctx.stroke()
62        );
63      });
64  }
65
66  function InitializeButton() {
67    // $("#stopButton").click(DeactivateConfetti),
68    //   $("#startButton").click(RestartConfetti);
69    $(".joe_aside__item.author")
70      .on("mouseenter", RestartConfetti)
71      .on("mouseleave", DeactivateConfetti);
72  }
73
74  function SetGlobals() {
75    (canvas1 = document.getElementById("canvas-strips")),
76      (ctx = canvas1.getContext("2d")),
77      (W = window.innerWidth),
78      (H = window.innerHeight);
79    // (canvas1.width = W),
80    // (canvas1.height = H);
81  }
82
83  function InitializeConfetti() {
84    (particles = []), (animationComplete = !1);
85    for (var t = 0; t < mp; t++) {
86      var i = particleColors.getColor();
87      particles.push(new confettiParticle(i));
88    }
89    StartConfetti();
90  }
91
92  function Draw() {
93    ctx.clearRect(0, 0, W, H);
94    for (var t, i = [], n = 0; n < mp; n++)
95      (t = n), i.push(particles[t].draw());
96    return Update(), i;
97  }
98
99  function RandomFromTo(t, i) {
100    return Math.floor(Math.random() * (i - t + 1) + t);
101  }
102
103  function Update() {
104    var t,
105      i = 0;
106    (angle += 0.01), (tiltAngle += 0.1);
107    for (var n = 0; n < mp; n++) {
108      if (((t = particles[n]), animationComplete)) return;
109      !confettiActive && t.y < -15
110        ? (t.y = H + 100)
111        : (stepParticle(t, n), t.y <= H && i++, CheckForReposition(t, n));
112    }
113    0 === i && StopConfetti();
114  }
115
116  function CheckForReposition(t, i) {
117    (t.x > W + 20 || t.x < -20 || t.y > H) &&
118      confettiActive &&
119      (i % 5 > 0 || i % 2 == 0
120        ? repositionParticle(
121            t,
122            Math.random() * W,
123            -10,
124            Math.floor(10 * Math.random()) - 10
125          )
126        : Math.sin(angle) > 0
127        ? repositionParticle(
128            t,
129            -5,
130            Math.random() * H,
131            Math.floor(10 * Math.random()) - 10
132          )
133        : repositionParticle(
134            t,
135            W + 5,
136            Math.random() * H,
137            Math.floor(10 * Math.random()) - 10
138          ));
139  }
140
141  function stepParticle(t, i) {
142    (t.tiltAngle += t.tiltAngleIncremental),
143      (t.y += (Math.cos(angle + t.d) + 3 + t.r / 2) / 2),
144      (t.x += Math.sin(angle)),
145      (t.tilt = 15 * Math.sin(t.tiltAngle - i / 3));
146  }
147
148  function repositionParticle(t, i, n, e) {
149    (t.x = i), (t.y = n), (t.tilt = e);
150  }
151
152  function StartConfetti() {
153    (W = window.innerWidth),
154      (H = window.innerHeight),
155      // (canvas1.width = W),
156      // (canvas1.height = H),
157      (function t() {
158        return animationComplete
159          ? null

160          : ((animationHandler = requestAnimFrame(t)), Draw());
161      })();
162  }
163
164  function ClearTimers() {
165    clearTimeout(reactivationTimerHandler), clearTimeout(animationHandler);
166  }
167
168  function DeactivateConfetti() {
169    (confettiActive = !1), ClearTimers();
170    isStart = false;
171  }
172
173  function StopConfetti() {
174    (animationComplete = !0), null != ctx && ctx.clearRect(0, 0, W, H);
175  }
176
177  function RestartConfetti() {
178    if (isStart) return;
179    isStart = true;
180    ClearTimers(),
181      StopConfetti(),
182      (reactivationTimerHandler = setTimeout(function () {
183        (confettiActive = !0), (animationComplete = !1), InitializeConfetti();
184      }, 100));
185  }
186  $(document).ready(function () {
187    SetGlobals(),
188      InitializeButton(),
189      // InitializeConfetti(),
190      $(window).resize(function () {
191        (W = window.innerWidth), (H = window.innerHeight);
192        // (canvas1.width = W),
193        // (canvas1.height = H);
194      });
195  }),
196    (window.requestAnimFrame =
197      window.requestAnimationFrame ||
198      window.webkitRequestAnimationFrame ||
199      window.mozRequestAnimationFrame ||
200      window.oRequestAnimationFrame ||
201      window.msRequestAnimationFrame ||
202      function (t) {
203        return window.setTimeout(t, 1e3 / 60);
204      });
205})();