https://charlotteclerk.com/js/particles.js?v=L2ozZtnrvjzJ84dgT8-CaDZ4obrBN_nnwb6cvsFuk7A

1if (particleArray !== undefined) {
2  let randomParticle = () =>
3    particleArray[Math.floor(Math.random() * particleArray.length)];
4
5  $(document).ready(function () {
6    if (window.innerWidth < 600) {
7      particleCount = particleCount / 4;
8    }
9    var documentHeight;
10
11    function particlesEffectFeature() {
12      var particle = (index) =>
13        `<img class='dot-${index}' src='${randomParticle()}'/>`;
14      var particlesContainer = $("#particlesContainer");
15
16      var particlesHTML = "";
17
18      for (let i = 0; i < particleCount; i++) {
19        particlesHTML += particle(i);
20      }
21
22      particlesContainer.append(particlesHTML);
23
24      setInterval(function () {
25        // Enable blur
26        blur = true;
27
28        // Disable blur after 2 seconds
29        setTimeout(function () {
30          blur = false;
31        }, 2000); // 2 seconds
32      }, 5000);
33
34      var animationTime = () =>
35        parseInt(
36          (
37            Math.random() * particleFallSpeedThreshold[0] +
38            particleFallSpeedThreshold[1]
39          ).toFixed(2),
40        ); // Duration in seconds
41      var randomSize = () =>
42        parseInt(
43          (
44            Math.random() * particleSizeThreshold[0] +
45            particleSizeThreshold[1]
46          ).toFixed(2),
47        );
48      var animationDelay = () => parseFloat((Math.random() * 10).toFixed(2)); // Increased and varied delay range
49      var randomGlow = () => parseInt((Math.random() * 50).toFixed(2));
50      var randomOpacity = () => 0.5 + Math.random() * 0.7;
51      var randomBlur = () => (blur ? Math.random() * 3 : 0);
52      var wobbleDuration = () => (Math.random() * 20 + 10).toFixed(2);
53      var Xposition = () => Math.floor(Math.random() * 100);
54
55      console.log(animationDelay());
56
57      for (let i = 0; i < particleCount; i++) {
58        let size = randomSize();
59        $(`.dot-${i}`).css({
60          zIndex: 999,
61          display: "block",
62          animation: `fall ${animationTime()}s linear ${
63            animationLoop ? "infinite" : 1
64          }, wobble ${wobbleDuration()}s ease-in-out infinite`,
65          animationDelay: `${animationDelay()}s`, // Apply the random delay here
66          right: `${Xposition()}vw`,
67          width: `auto`,
68          height: `${size}px`,
69          top: -particleSizeThreshold[0] - 100,
70          filter: `${
71            glow
72              ? `drop-shadow(0 0 ${randomGlow()}px white) drop-shadow(0 0 ${
73                  randomGlow() * 2
74                }px white)`
75              : ""
76          } blur(${randomBlur()}px)`,
77          opacity: randomOpacity(),
78        });
79      }
80
81      var keyframesFall = `
82        @keyframes fall {
83            0% { top: -40px; opacity: 1; }
84            80% { opacity: 1; }
85            100% { top: ${documentHeight() - 20}px; opacity: 0; }
86        }
87    `;
88
89      var keyframesWobble = `
90        @keyframes wobble {
91            0%, 100% { transform: translateX(0) ${
92              particleRotate ? "rotate(0deg)" : ""
93            }; }
94            25% { transform: translateX(-${wobbleEffect}px) ${
95              particleRotate ? "rotate(90deg)" : ""
96            }; }
97            50% { transform: translateX(${wobbleEffect}px) ${
98              particleRotate ? "rotate(180deg)" : ""
99            }; }
100            75% { transform: translateX(-${wobbleEffect}px) ${
101              particleRotate ? "rotate(360deg)" : ""
102            }; }
103        }
104    `;
105
106      var $styleSheet = $('<style type="text/css">');
107      $styleSheet.text(keyframesFall + keyframesWobble);
108      $("head").append($styleSheet);
109    }
110    setTimeout(() => {
111      documentHeight = () => $(document).height();
112      particlesEffectFeature();
113    }, 300);
114  });
115}