-
Notifications
You must be signed in to change notification settings - Fork 0
/
PureSnow.js
86 lines (71 loc) · 2.43 KB
/
PureSnow.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
let snowflakes_count = 100;
// let base_css = ``; // Put your custom base css here
if (typeof total !== "undefined") {
snowflakes_count = total;
}
// Creating snowflakes
function spawn_snow(snow_density = 200) {
snow_density -= 1;
for (let x = 0; x < snow_density; x++) {
let board = document.createElement("div");
board.className = "snowflake";
document.getElementById("snow").appendChild(board);
}
}
// Append style for each snowflake to the head
function add_css(rule) {
let css = document.createElement("style");
css.appendChild(document.createTextNode(rule)); // Support for the rest
document.getElementsByTagName("head")[0].appendChild(css);
}
// Math
function random_int(value = 100) {
return Math.floor(Math.random() * value) + 1;
}
function random_range(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Create style for snowflake
function spawnSnowCSS(snow_density = 200) {
let snowflake_name = "snowflake";
let rule = ``;
if (typeof base_css !== "undefined") {
rule = base_css;
}
for (let i = 1; i < snow_density; i++) {
let random_x = Math.random() * 100; // vw
let random_offset = random_range(-100000, 100000) * 0.0001; // vw;
let random_x_end = random_x + random_offset;
let random_x_end_yoyo = random_x + random_offset / 2;
let random_yoyo_time = random_range(30000, 80000) / 100000;
let random_yoyo_y = random_yoyo_time * 100; // vh
let random_scale = Math.random();
let fall_duration = random_range(10, 30) * 1; // s
let fall_delay = random_int(30) * -1; // s
let opacity_ = Math.random();
rule += `
.${snowflake_name}:nth-child(${i}) {
opacity: ${opacity_};
transform: translate(${random_x}vw, -10px) scale(${random_scale});
animation: fall-${i} ${fall_duration}s ${fall_delay}s linear infinite;
}
@keyframes fall-${i} {
${random_yoyo_time * 100}% {
transform: translate(${random_x_end}vw, ${random_yoyo_y}vh) scale(${random_scale});
}
to {
transform: translate(${random_x_end_yoyo}vw, 100vh) scale(${random_scale});
}
}
`;
}
add_css(rule);
}
// Load the rules and execute after the DOM loads
window.onload = function () {
spawnSnowCSS(snowflakes_count);
spawn_snow(snowflakes_count);
};
// TODO add progress bar for slower clients