Javascript particle alternatives

randomThemer.js

@@ -1,7 +1,7 @@
 function rain() {
     var html = ""
 
-    html += `<link rel="stylesheet" type="text/css" href="/themes/rain.css">`
+    html += `<link rel="stylesheet" type="text/css" href="/themes/rain/style.css"> <script src="/themes/rain/script.js"></script>`
     html += `<div class="rainStuff"><div class="rainContainer">`
 
     var amount = 7
@@ -60,10 +60,10 @@ function rain() {
 function purpleMagic() {
     var html = ""
 
-    html += `<link rel="stylesheet" type="text/css" href="/themes/purpleMagic.css">`
+    html += `<link rel="stylesheet" type="text/css" href="/themes/magic/style.css"> <script src="/themes/magic/script.js"></script>`
     html += `<div class="magicStuff"><div class="magicContainer">`
 
-    var amount = 30
+    var amount = 15
 
     for (let index = 0; index < amount; index++) {
         html += `<div class="particle"></div>`
@@ -78,6 +78,10 @@ function purpleMagic() {
 
         }
         `
+
+        if (index % 2 == 0) {
+            html.replace("alternate", "alternate-reverse")
+        }
         
         var pos = Math.round(Math.random() * 100)
 
@@ -114,9 +118,9 @@ function code() {
 }
 
 var events = [
-    rain(),
-    purpleMagic(),
     code(),
+    purpleMagic(),
+    rain(),
     "",
 ]
 

static/themes/magic/script.js

@@ -0,0 +1,34 @@
+$(document).ready(() => {
+    function particle() {
+        var particle = $("<div></div>")
+        particle.addClass("particle")
+        particle.css("left", (Math.random() * 100).toString() + "%")
+        particle.css("visibility", "visible")
+        particle.css("top", "100%")
+        var anim = "sway 4s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95)"
+        if (Math.round(Math.random()) == 1) {
+            anim += " alternate"
+        } else {
+            anim += " alternate-reverse"
+        }
+        particle.css("animation", anim)
+
+        particle.animate({
+            "top": "-5%"
+        }, (((Math.round(Math.random() * 10) / 10) * 0.3) + 20) * 1000, () => {
+            particle.remove()
+        })
+
+        $(".magicContainer").append(particle)
+}
+
+    $(".magicContainer > *").remove()
+
+    function loop() {
+        particle()
+        setTimeout(() => {
+            loop()
+        }, 1000);
+    }
+    loop()
+})

static/themes/rain/script.js

@@ -0,0 +1,28 @@
+$(document).ready(() => {
+    function particle() {
+        var particle = $("<div></div>")
+        particle.addClass("rainDrop")
+        particle.css("left", (Math.random() * 100).toString() + "%")
+        particle.css("visibility", "visible")
+        particle.css("top", "-10%")
+
+        particle.animate({
+            "top": "110%",
+            "easing": "linear"
+        }, 600, () => {
+            particle.remove()
+        })
+
+        $(".rainContainer").append(particle)
+}
+
+    $(".rainContainer > *").remove()
+
+    function loop() {
+        particle()
+        setTimeout(() => {
+            loop()
+        }, 100 * (Math.random() + 0.25));
+    }
+    loop()
+})