Javascript particle alternatives
This commit is contained in:
parent
ff3d4e4d04
commit
b9f830a23b
6 changed files with 2172 additions and 7 deletions
|
@ -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
2103
static/jquery.js
vendored
File diff suppressed because it is too large
Load diff
34
static/themes/magic/script.js
Normal file
34
static/themes/magic/script.js
Normal 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()
|
||||||
|
})
|
28
static/themes/rain/script.js
Normal file
28
static/themes/rain/script.js
Normal 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()
|
||||||
|
})
|
Loading…
Reference in a new issue