65 lines
2.4 KiB
JavaScript
65 lines
2.4 KiB
JavaScript
let randomSnowflakes = flase; // enable random Snowflakes
|
|
const snowflakeCount = 50; // count of random extra snowflakes
|
|
|
|
|
|
// function to check and control the snowflakes
|
|
function toggleSnowflakes() {
|
|
const body = document.body;
|
|
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
|
const isDashboard = body.classList.contains('dashboardDocument');
|
|
const hasUserMenu = document.querySelector('#app-user-menu');
|
|
|
|
// hide snowflakes if video player is active or dashboard is visible
|
|
if (videoPlayer || isDashboard || hasUserMenu) {
|
|
body.classList.add('hide-snowflakes');
|
|
} else {
|
|
body.classList.remove('hide-snowflakes');
|
|
}
|
|
}
|
|
|
|
// observe changes in the DOM
|
|
const observer = new MutationObserver(toggleSnowflakes);
|
|
|
|
// start observation
|
|
observer.observe(document.body, {
|
|
childList: true, // observe adding/removing of child elements
|
|
subtree: true, // observe all levels of the DOM tree
|
|
attributes: true // observe changes to attributes (e.g. class changes)
|
|
});
|
|
|
|
function addRandomSnowflakes(count) {
|
|
const snowflakeContainer = document.querySelector('.snowflakes'); // get the snowflake container
|
|
if (!snowflakeContainer) return; // exit if snowflake container is not found
|
|
|
|
const snowflakeSymbols = ['❅', '❆', '❄']; // some snowflake symbols
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
// create a new snowflake element
|
|
const snowflake = document.createElement('div');
|
|
snowflake.classList.add('snowflake');
|
|
|
|
// pick a random snowflake symbol
|
|
snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
|
|
|
|
// set random horizontal position, size and animation delay
|
|
const randomLeft = Math.random() * 100; // position (0% to 100%)
|
|
const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em)
|
|
const randomAnimationDelay = Math.random() * 5; // delay (0s to 5s)
|
|
|
|
// apply styles
|
|
snowflake.style.left = `${randomLeft}%`;
|
|
snowflake.style.fontSize = `${randomSize}em`;
|
|
snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay / 2}s`;
|
|
|
|
// add the snowflake to the container
|
|
snowflakeContainer.appendChild(snowflake);
|
|
}
|
|
}
|
|
|
|
// initialize snowflakes
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
toggleSnowflakes(); //check if snowflakes should be hidden
|
|
if (randomSnowflakes) {
|
|
addRandomSnowflakes(snowflakeCount); //add random snowflakes
|
|
}
|
|
}); |