Javascript particle alternatives

This commit is contained in:
bingus_violet 2024-06-26 18:16:19 -05:00
parent ff3d4e4d04
commit b9f830a23b
6 changed files with 2172 additions and 7 deletions

View file

@ -1,7 +1,7 @@
function rain() { function rain() {
var html = "" 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">` html += `<div class="rainStuff"><div class="rainContainer">`
var amount = 7 var amount = 7
@ -60,10 +60,10 @@ function rain() {
function purpleMagic() { function purpleMagic() {
var html = "" 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">` html += `<div class="magicStuff"><div class="magicContainer">`
var amount = 30 var amount = 15
for (let index = 0; index < amount; index++) { for (let index = 0; index < amount; index++) {
html += `<div class="particle"></div>` html += `<div class="particle"></div>`
@ -79,6 +79,10 @@ function purpleMagic() {
} }
` `
if (index % 2 == 0) {
html.replace("alternate", "alternate-reverse")
}
var pos = Math.round(Math.random() * 100) var pos = Math.round(Math.random() * 100)
html += `@keyframes magic${index} { ` html += `@keyframes magic${index} { `
@ -114,9 +118,9 @@ function code() {
} }
var events = [ var events = [
rain(),
purpleMagic(),
code(), code(),
purpleMagic(),
rain(),
"", "",
] ]

2103
static/jquery.js vendored

File diff suppressed because it is too large Load diff

View file

@ -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()
})

View file

@ -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()
})