api.violets-purgatory.dev/weatherGenerator.js

103 lines
2.6 KiB
JavaScript
Raw Normal View History

2024-03-03 23:57:30 -06:00
module.exports = {
makeRain: function (hardRain) {
var html = ""
html += `<div class="rainStuff"><div class="rainContainer">`
html +=
`
<style>
#card {
background-color: rgba(50, 0, 90, 0.5);
backdrop-filter: blur(5px);
}
.rainStuff {
position: sticky;
top: 0;
height: 0;
z-index: -5;
}
.rainContainer {
height: 100vh;
width: 80vw;
top: 0px;
left: 10vw;
position: absolute;
overflow: hidden;
}
.rainDrop {
position: absolute;
width: 5px;
backdrop-filter: blur(5px);
background-color: rgba(0, 0, 255, 0.2);
height: 10vh;
visibility: hidden;
}
body {
background: linear-gradient(rgb(10, 10, 75), black);
}
</style>
`
2024-03-23 01:38:35 -05:00
var amount = 7
2024-03-03 23:57:30 -06:00
2024-03-23 01:40:03 -05:00
var iterationReducer = 3
2024-03-03 23:57:30 -06:00
if (hardRain) {
amount = 100
}
for (let index = 0; index < amount; index++) {
html += `<div class="rainDrop"></div>`
}
html += "<style>"
for (let index = 0; index < amount; index++) {
html += `
.rainDrop:nth-of-type(${index + 1}) {
animation: rainAnim${index} ${(Math.random() * 0.3) + (5 - iterationReducer)}s linear;
animation-iteration-count: infinite;
2024-03-04 11:12:08 -06:00
animation-delay: ${Math.round(Math.random() * 100) / 100}s;
2024-03-03 23:57:30 -06:00
}
`
var randos = []
for (let index = 0; index < 11; index++) {
2024-03-04 11:12:08 -06:00
randos.push(Math.round(Math.random() * 100))
2024-03-03 23:57:30 -06:00
}
html += `@keyframes rainAnim${index} { `
for (let index = 0; index < (iterationReducer * -3.5) + 14.5; index++) {
html += `
${index * iterationReducer}0% {
top: 110vh;
right: ${randos[index]}%;
2024-03-03 23:57:30 -06:00
visibility: hidden;
}
${index * iterationReducer}0.1% {
top: -10vh;
right: ${randos[index + 1]}%;
2024-03-03 23:57:30 -06:00
visibility: hidden;
}
${index * iterationReducer}0.2% {
visibility: visible;
}
`
}
// console.log(html)
html += `90.3% { visibility: hidden; }`
2024-03-03 23:57:30 -06:00
html += `}`
}
html += "</style>"
html += "</div></div>"
return html
}
}