set names
This commit is contained in:
@ -1,3 +1,3 @@
|
||||
<script src="seasonals/snowflakes.js"></script>
|
||||
<link rel="stylesheet" href="seasonals/snowflakes.css">
|
||||
<div class="snowflakes"></div>
|
||||
<script src="seasonals/autumn.js"></script>
|
||||
<link rel="stylesheet" href="seasonals/autumn.css">
|
||||
<div class="autumn-container"></div>
|
||||
111
autum.js
111
autum.js
@ -1,111 +0,0 @@
|
||||
const snowflakes = true; // enable/disable snowflakes
|
||||
const randomSnowflakes = true; // enable random Snowflakes
|
||||
const randomSnowflakesMobile = false; // enable random Snowflakes on mobile devices
|
||||
const enableColoredSnowflakes = true; // enable colored snowflakes on mobile devices
|
||||
const snowflakeCount = 25; // count of random extra snowflakes
|
||||
|
||||
|
||||
let msgPrinted = false; // flag to prevent multiple console messages
|
||||
|
||||
// function to check and control the snowflakes
|
||||
function toggleSnowflakes() {
|
||||
const snowflakeContainer = document.querySelector('.snowflakes');
|
||||
if (!snowflakeContainer) return;
|
||||
|
||||
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
||||
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
|
||||
const isDashboard = document.body.classList.contains('dashboardDocument');
|
||||
const hasUserMenu = document.querySelector('#app-user-menu');
|
||||
|
||||
// hide snowflakes if video/trailer player is active or dashboard is visible
|
||||
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
|
||||
snowflakeContainer.style.display = 'none'; // hide snowflakes
|
||||
if (!msgPrinted) {
|
||||
console.log('Snowflakes hidden');
|
||||
msgPrinted = true;
|
||||
}
|
||||
} else {
|
||||
snowflakeContainer.style.display = 'block'; // show snowflakes
|
||||
if (msgPrinted) {
|
||||
console.log('Snowflakes visible');
|
||||
msgPrinted = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
|
||||
console.log('Adding random snowflakes');
|
||||
|
||||
const snowflakeSymbols = ['❅', '❆']; // some snowflake symbols
|
||||
const snowflakeSymbolsMobile = ['❅', '❆', '❄']; // some snowflake symbols mobile version
|
||||
|
||||
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
|
||||
if (enableColoredSnowflakes) {
|
||||
snowflake.textContent = snowflakeSymbolsMobile[Math.floor(Math.random() * snowflakeSymbolsMobile.length)];
|
||||
} else {
|
||||
snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
|
||||
}
|
||||
|
||||
// set random horizontal position, animation delay and size(uncomment lines to enable)
|
||||
const randomLeft = Math.random() * 100; // position (0% to 100%)
|
||||
//const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size
|
||||
const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s)
|
||||
const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
|
||||
|
||||
// apply styles
|
||||
snowflake.style.left = `${randomLeft}%`;
|
||||
//snowflake.style.fontSize = `${randomSize}em`; //uncomment to enable random size
|
||||
snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
|
||||
|
||||
// add the snowflake to the container
|
||||
snowflakeContainer.appendChild(snowflake);
|
||||
}
|
||||
console.log('Random snowflakes added');
|
||||
}
|
||||
|
||||
// initialize standard snowflakes
|
||||
function initSnowflakes() {
|
||||
const snowflakesContainer = document.querySelector('.snowflakes');
|
||||
|
||||
// Array of snowflake characters
|
||||
const snowflakeSymbols = ['❅', '❆'];
|
||||
|
||||
// create the 12 standard snowflakes
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const snowflake = document.createElement('div');
|
||||
snowflake.className = 'snowflake';
|
||||
snowflake.textContent = snowflakeSymbols[i % 2]; // change between ❅ and ❆
|
||||
|
||||
snowflakesContainer.appendChild(snowflake);
|
||||
}
|
||||
}
|
||||
|
||||
// initialize snowflakes and add random snowflakes after the DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (!snowflakes) return; // exit if snowflakes are disabled
|
||||
initSnowflakes();
|
||||
toggleSnowflakes();
|
||||
|
||||
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
|
||||
if (randomSnowflakes && (screenWidth > 768 || randomSnowflakesMobile)) { // add random snowflakes only on larger screens, unless enabled for mobile devices
|
||||
addRandomSnowflakes(snowflakeCount);
|
||||
}
|
||||
});
|
||||
@ -1,11 +1,11 @@
|
||||
.snowflakes {
|
||||
.autumn-container {
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.snowflake {
|
||||
.leaf {
|
||||
position: fixed;
|
||||
top: -10%;
|
||||
font-size: 1em;
|
||||
@ -15,13 +15,13 @@
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: default;
|
||||
animation-name: snowflakes-fall, snowflakes-shake;
|
||||
animation-name: leaf-fall, leaf-shake;
|
||||
animation-duration: 10s, 3s;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes snowflakes-fall {
|
||||
@-webkit-keyframes leaf-fall {
|
||||
0% {
|
||||
top: -10%;
|
||||
}
|
||||
@ -31,7 +31,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes snowflakes-shake {
|
||||
@-webkit-keyframes leaf-shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
@ -45,7 +45,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes snowflakes-fall {
|
||||
@keyframes leaf-fall {
|
||||
0% {
|
||||
top: -10%;
|
||||
}
|
||||
@ -55,7 +55,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes snowflakes-shake {
|
||||
@keyframes leaf-shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
@ -67,62 +67,62 @@
|
||||
}
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(0) {
|
||||
.leaf:nth-of-type(0) {
|
||||
left: 0%;
|
||||
animation-delay: 0s, 0s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(1) {
|
||||
.leaf:nth-of-type(1) {
|
||||
left: 10%;
|
||||
animation-delay: 1s, 1s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(2) {
|
||||
.leaf:nth-of-type(2) {
|
||||
left: 20%;
|
||||
animation-delay: 6s, 0.5s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(3) {
|
||||
.leaf:nth-of-type(3) {
|
||||
left: 30%;
|
||||
animation-delay: 4s, 2s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(4) {
|
||||
.leaf:nth-of-type(4) {
|
||||
left: 40%;
|
||||
animation-delay: 2s, 2s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(5) {
|
||||
.leaf:nth-of-type(5) {
|
||||
left: 50%;
|
||||
animation-delay: 8s, 3s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(6) {
|
||||
.leaf:nth-of-type(6) {
|
||||
left: 60%;
|
||||
animation-delay: 6s, 2s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(7) {
|
||||
.leaf:nth-of-type(7) {
|
||||
left: 70%;
|
||||
animation-delay: 2.5s, 1s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(8) {
|
||||
.leaf:nth-of-type(8) {
|
||||
left: 80%;
|
||||
animation-delay: 1s, 0s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(9) {
|
||||
.leaf:nth-of-type(9) {
|
||||
left: 90%;
|
||||
animation-delay: 3s, 1.5s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(10) {
|
||||
.leaf:nth-of-type(10) {
|
||||
left: 25%;
|
||||
animation-delay: 2s, 0s;
|
||||
}
|
||||
|
||||
.snowflake:nth-of-type(11) {
|
||||
.leaf:nth-of-type(11) {
|
||||
left: 65%;
|
||||
animation-delay: 4s, 2.5s;
|
||||
}
|
||||
129
autumn.js
Normal file
129
autumn.js
Normal file
@ -0,0 +1,129 @@
|
||||
const leaves = true; // enable/disable leaves
|
||||
const randomLeaves = true; // enable random leaves
|
||||
const randomLeavesMobile = false; // enable random leaves on mobile devices
|
||||
const leafCount = 25; // count of random extra leaves
|
||||
|
||||
|
||||
let msgPrinted = false; // flag to prevent multiple console messages
|
||||
|
||||
// function to check and control the leaves
|
||||
function toggleAutumn() {
|
||||
const autumnContainer = document.querySelector('.autumn-container');
|
||||
if (!autumnContainer) return;
|
||||
|
||||
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
||||
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
|
||||
const isDashboard = document.body.classList.contains('dashboardDocument');
|
||||
const hasUserMenu = document.querySelector('#app-user-menu');
|
||||
|
||||
// hide leaves if video/trailer player is active or dashboard is visible
|
||||
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
|
||||
autumnContainer.style.display = 'none'; // hide leaves
|
||||
if (!msgPrinted) {
|
||||
console.log('Autumn hidden');
|
||||
msgPrinted = true;
|
||||
}
|
||||
} else {
|
||||
autumnContainer.style.display = 'block'; // show leaves
|
||||
if (msgPrinted) {
|
||||
console.log('Autumn visible');
|
||||
msgPrinted = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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)
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
const images = [
|
||||
"/web/seasonal/ghost_20x20.png",
|
||||
"/web/seasonal/bat_20x20.png",
|
||||
"/web/seasonal/pumpkin_20x20.png",
|
||||
];*/
|
||||
const images = [
|
||||
"./images/ghost_20x20.png",
|
||||
"./images/bat_20x20.png",
|
||||
"./images/pumpkin_20x20.png",
|
||||
];
|
||||
|
||||
|
||||
function addRandomLeaves(count) {
|
||||
const autumnContainer = document.querySelector('.autumn-container'); // get the leave container
|
||||
if (!autumnContainer) return; // exit if leave container is not found
|
||||
|
||||
console.log('Adding random leaves');
|
||||
|
||||
// Array of leave characters
|
||||
for (let i = 0; i < count; i++) {
|
||||
// create a new leave element
|
||||
const leave = document.createElement('div');
|
||||
leave.classList.add('leave');
|
||||
|
||||
// pick a random leave symbol
|
||||
if (enableColoredSnowflakes) {
|
||||
leave.textContent = autumnSymbolsMobile[Math.floor(Math.random() * autumnSymbolsMobile.length)];
|
||||
} else {
|
||||
leave.textContent = autumnSymbols[Math.floor(Math.random() * autumnSymbols.length)];
|
||||
}
|
||||
|
||||
// set random horizontal position, animation delay and size(uncomment lines to enable)
|
||||
const randomLeft = Math.random() * 100; // position (0% to 100%)
|
||||
//const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size
|
||||
const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s)
|
||||
const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
|
||||
|
||||
// apply styles
|
||||
leave.style.left = `${randomLeft}%`;
|
||||
//leave.style.fontSize = `${randomSize}em`; //uncomment to enable random size
|
||||
leave.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
|
||||
|
||||
// add the leave to the container
|
||||
autumnContainer.appendChild(leave);
|
||||
}
|
||||
console.log('Random leaves added');
|
||||
}
|
||||
|
||||
// initialize standard leaves
|
||||
function initSnowflakes() {
|
||||
const container = document.querySelector('.autumn-container') || document.createElement("div");
|
||||
|
||||
if (!document.querySelector('.autumn-container')) {
|
||||
container.className = "autumn-container";
|
||||
container.setAttribute("aria-hidden", "true");
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
for (let i = 0; i < 1; i++) {
|
||||
images.forEach(imageSrc => {
|
||||
const leafDiv = document.createElement("div");
|
||||
leafDiv.className = "leaf";
|
||||
|
||||
const img = document.createElement("img");
|
||||
img.src = imageSrc;
|
||||
|
||||
leafDiv.appendChild(img);
|
||||
container.appendChild(leafDiv);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// initialize leaves and add random leaves after the DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (!leaves) return; // exit if leaves are disabled
|
||||
initSnowflakes();
|
||||
toggleSnowflakes();
|
||||
|
||||
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
|
||||
if (randomSnowflakes && (screenWidth > 768 || randomSnowflakesMobile)) { // add random leaves only on larger screens, unless enabled for mobile devices
|
||||
addRandomSnowflakes(snowflakeCount);
|
||||
}
|
||||
});
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Snowflakes Display</title>
|
||||
<title>Autumn Display</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
@ -12,9 +12,9 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="snowflakes.js"></script>
|
||||
<link rel="stylesheet" href="snowflakes.css">
|
||||
<div class="snowflakes"></div>
|
||||
<script src="autumn.js"></script>
|
||||
<link rel="stylesheet" href="autumn.css">
|
||||
<div class="autumn-container"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user