fwoppydwisk/diskfloppy.me
fwoppydwisk/diskfloppy.me
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Activity Actions

fix: snowflakes falling below window viewport

Browse source
This commit is contained in:
floppydiskette 2023-11-27 21:31:22 +00:00
parent 5f713d33d2
commit 225049b510
No known key found for this signature in database
1 changed files with 41 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
public/js/christmas/snow.js
View file

@ -7,7 +7,6 @@
// - Made snowflakes randomly rotate slowly either right or left // - Made snowflakes randomly rotate slowly either right or left
*/ */
// Amount of Snowflakes // Amount of Snowflakes
var snowMax = 80; var snowMax = 80;
@ -43,70 +42,72 @@ var snowStyles = "cursor: default; -webkit-user-select: none; -moz-user-select:
*/ */
var snow = [], var snow = [],
pos = [], pos = [],
coords = [], coords = [],
lefr = [], lefr = [],
marginBottom, marginBottom,
marginRight; marginRight;
function randomise(range) { function randomise(range) {
rand = Math.floor(range * Math.random()); rand = Math.floor(range * Math.random());
return rand; return rand;
} }
function initSnow() { function initSnow() {
var snowSize = snowMaxSize - snowMinSize; var snowSize = snowMaxSize - snowMinSize;
marginBottom = window.screen.height - 5; marginBottom = Math.max(document.body.scrollHeight, window.innerHeight) - 5;
marginRight = document.body.clientWidth - 15; marginRight = document.body.clientWidth - 15;
for (i = 0; i <= snowMax; i++) { for (i = 0; i <= snowMax; i++) {
coords[i] = 0; coords[i] = 0;
lefr[i] = Math.random() * 15; lefr[i] = Math.random() * 15;
pos[i] = 0.03 + Math.random() / 10; pos[i] = 0.03 + Math.random() / 10;
snow[i] = document.getElementById("flake" + i); snow[i] = document.getElementById("flake" + i);
snow[i].style.fontFamily = "inherit"; snow[i].style.fontFamily = "inherit";
snow[i].size = randomise(snowSize) + snowMinSize; snow[i].size = randomise(snowSize) + snowMinSize;
snow[i].style.fontSize = snow[i].size + "px"; snow[i].style.fontSize = snow[i].size + "px";
snow[i].style.color = snowColor[randomise(snowColor.length)]; snow[i].style.color = snowColor[randomise(snowColor.length)];
snow[i].style.zIndex = 1000; snow[i].style.zIndex = 1000;
snow[i].sink = snowSpeed * snow[i].size / 5; snow[i].sink = snowSpeed * snow[i].size / 5;
snow[i].posX = randomise(marginRight - snow[i].size); snow[i].posX = randomise(marginRight - snow[i].size);
snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * snow[i].size); snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * snow[i].size);
snow[i].style.left = snow[i].posX + "px"; snow[i].style.left = snow[i].posX + "px";
snow[i].style.top = snow[i].posY + "px"; snow[i].style.top = snow[i].posY + "px";
snow[i].rotation = Math.random() * 360; // add a random initial rotation snow[i].rotation = Math.random() * 360; // add a random initial rotation
snow[i].direction = Math.random() > 0.5 ? 1 : -1; // add a random direction snow[i].direction = Math.random() > 0.5 ? 1 : -1; // add a random direction
} }
moveSnow(); moveSnow();
} }
function resize() { function resize() {
marginBottom = window.screen.height - 5; marginBottom = Math.max(document.body.scrollHeight, window.innerHeight) - 5;
marginRight = document.body.clientWidth - 15; marginRight = document.body.clientWidth - 15;
} }
function moveSnow() { function moveSnow() {
for (i = 0; i <= snowMax; i++) { for (i = 0; i <= snowMax; i++) {
coords[i] += pos[i]; coords[i] += pos[i];
snow[i].posY += snow[i].sink; snow[i].posY += snow[i].sink;
snow[i].style.left = snow[i].posX + lefr[i] * Math.sin(coords[i]) + "px"; snow[i].style.left = snow[i].posX + lefr[i] * Math.sin(coords[i]) + "px";
snow[i].style.top = snow[i].posY + "px"; snow[i].style.top = snow[i].posY + "px";
if (snow[i].posY >= marginBottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginRight - 3 * lefr[i])) {
snow[i].posX = randomise(marginRight - snow[i].size); if (snow[i].posY >= marginBottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginRight - 3 * lefr[i])) {
snow[i].posY = 0; snow[i].posX = randomise(marginRight - snow[i].size);
} snow[i].posY = 0;
}
snow[i].rotation += snow[i].sink * snow[i].direction; // increment rotation based on direction snow[i].rotation += snow[i].sink * snow[i].direction; // increment rotation based on direction
snow[i].style.transform = "rotate(" + snow[i].rotation + "deg)"; // rotate the snowflake snow[i].style.transform = "rotate(" + snow[i].rotation + "deg)"; // rotate the snowflake
} }
setTimeout("moveSnow()", snowRefresh); setTimeout("moveSnow()", snowRefresh);
} }
for (i = 0; i <= snowMax; i++) { for (i = 0; i <= snowMax; i++) {
document.write("<span id='flake" + i + "' style='" + snowStyles + "position:absolute;top:-" + snowMaxSize + "'>" + snowEntity + "</span>"); document.write("<span id='flake" + i + "' style='" + snowStyles + "position:absolute;top:-" + snowMaxSize + "'>" + snowEntity + "</span>");
} }
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
window.addEventListener('load', initSnow); window.addEventListener('load', initSnow);