CodeDevMLH/Seasonals
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working

Browse Source
This commit is contained in:
MLH
2025-01-26 23:19:35 +01:00
parent d307249474
commit 8438874294
1 changed files with 37 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
seperate single seasonals/Seasonals-Santa/santa.js
View File

@@ -2,9 +2,15 @@ const santaIsFlying = true; // enable/disable santa
let snowflakesCount = 500; // count of snowflakes (recommended values: 300-600) let snowflakesCount = 500; // count of snowflakes (recommended values: 300-600)
const snowflakesCountMobile = 250; // count of snowflakes on mobile devices const snowflakesCountMobile = 250; // count of snowflakes on mobile devices
const snowFallSpeed = 3; // speed of snowfall (recommended values: 0-5) const snowFallSpeed = 3; // speed of snowfall (recommended values: 0-5)
const santaSpeed = 10; // speed of santa in seconds (recommended values: 5000-15000)
const santaSpeedMobile = 8; // speed of santa on mobile devices in seconds
const maxSantaRestTime = 8; // maximum time santa rests in seconds
const minSantaRestTime = 3; // minimum time santa rests in seconds
const maxPresentFallSpeed = 5; // maximum speed of falling presents in seconds
const minPresentFallSpeed = 2; // minimum speed of falling presents in seconds
let msgPrinted = false; // flag to prevent multiple console messages let msgPrinted = false; // flag to prevent multiple console messages
let isMobile = false; // flag to detect mobile devices
let canvas, ctx; // canvas and context for drawing snowflakes let canvas, ctx; // canvas and context for drawing snowflakes
let animationFrameId; // ID of the animation frame let animationFrameId; // ID of the animation frame
let animationFrameIdSanta; // ID of the animation frame for santa let animationFrameIdSanta; // ID of the animation frame for santa
@@ -29,7 +35,7 @@ function toggleSnowfall() {
} }
} else { } else {
santaContainer.style.display = 'block'; // show santa santaContainer.style.display = 'block'; // show santa
if (!animationFrameId) { if (!animationFrameId && !animationFrameIdSanta) {
initializeCanvas(); initializeCanvas();
snowflakes = createSnowflakes(santaContainer); snowflakes = createSnowflakes(santaContainer);
animateAll(); animateAll();
@@ -85,6 +91,11 @@ function removeCanvas() {
animationFrameId = null; animationFrameId = null;
console.log('Animation frame canceled'); console.log('Animation frame canceled');
} }
if (animationFrameIdSanta) {
cancelAnimationFrame(animationFrameIdSanta);
animationFrameIdSanta = null;
console.log('Santa animation frame canceled');
}
console.log('Canvas removed'); console.log('Canvas removed');
} }
} }
@@ -100,7 +111,7 @@ function createSnowflakes(container) {
return Array.from({ length: snowflakesCount }, () => ({ return Array.from({ length: snowflakesCount }, () => ({
x: Math.random() * canvas.width, x: Math.random() * canvas.width,
y: Math.random() * canvas.height, y: Math.random() * canvas.height,
radius: Math.random() * 1.2 + 1, radius: Math.random() * 0.6 + 1,
speed: Math.random() * snowFallSpeed + 1, speed: Math.random() * snowFallSpeed + 1,
swing: Math.random() * 2 - 1, swing: Math.random() * 2 - 1,
})); }));
@@ -141,6 +152,7 @@ function updateSnowflakes() {
}); });
} }
// credits: flaticon.com
const presentImages = [ const presentImages = [
'images/gift1.png', 'images/gift1.png',
'images/gift2.png', 'images/gift2.png',
@@ -152,9 +164,11 @@ const presentImages = [
'images/gift8.png', 'images/gift8.png',
]; ];
// credits: https://www.animatedimages.org/img-animated-santa-claus-image-0420-85884.htm
const santaImage = 'images/santa.gif'; const santaImage = 'images/santa.gif';
/* /*
// credits: flaticon.com
const presentImages = [ const presentImages = [
'seasonals/santa_images/gift1.png', 'seasonals/santa_images/gift1.png',
'seasonals/santa_images/gift2.png', 'seasonals/santa_images/gift2.png',
@@ -166,6 +180,7 @@ const presentImages = [
'seasonals/santa_images/gift8.png', 'seasonals/santa_images/gift8.png',
]; ];
// credits: https://www.animatedimages.org/img-animated-santa-claus-image-0420-85884.htm
const santaImage = 'seasonals/santa_images/santa.gif'; const santaImage = 'seasonals/santa_images/santa.gif';
*/ */
@@ -175,7 +190,6 @@ function createSantaElement() {
santa.classList.add('santa'); santa.classList.add('santa');
const santaContainer = document.querySelector('.santa-container'); const santaContainer = document.querySelector('.santa-container');
santaContainer.appendChild(santa); santaContainer.appendChild(santa);
return santa;
} }
function dropPresent(santa, fromLeft) { function dropPresent(santa, fromLeft) {
@@ -187,14 +201,12 @@ function dropPresent(santa, fromLeft) {
// Get Santa's position // Get Santa's position
const santaRect = santa.getBoundingClientRect(); const santaRect = santa.getBoundingClientRect();
// present.style.left = `${santaRect.left + santaRect.width / 2}px`; present.style.left = fromLeft ? `${santaRect.left}px` : `${santaRect.left + santaRect.width - 15}px`;
// present.style.top = `${santaRect.bottom}px`; present.style.top = `${santaRect.bottom - 50}px`;
present.style.left = `${santaRect.left + santaRect.width / 2}px`;
present.style.top = `${santaRect.bottom}px`;
present.style.transition = 'top 2s linear';
// Start falling // Start falling
const duration = Math.random() * (maxPresentFallSpeed - minPresentFallSpeed) + minPresentFallSpeed;
present.style.transition = `top ${duration}s linear`;
requestAnimationFrame(() => { requestAnimationFrame(() => {
present.style.top = `${window.innerHeight}px`; present.style.top = `${window.innerHeight}px`;
}); });
@@ -206,21 +218,26 @@ function dropPresent(santa, fromLeft) {
} }
function animateSanta() { function animateSanta() {
const santa = createSantaElement(); const santa = document.querySelector('.santa');
const screenWidth = window.innerWidth; const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight; const screenHeight = window.innerHeight;
const fromLeft = Math.random() < 0.5; const fromLeft = Math.random() < 0.5;
const startX = fromLeft ? -220 : screenWidth + 220; const startX = fromLeft ? -220 : screenWidth + 220;
const endX = fromLeft ? screenWidth + 220 : -220; const endX = fromLeft ? screenWidth + 220 : -220;
const startY = Math.random() * (screenHeight / 6) + 20; // Restrict to upper quarter const startY = Math.random() * (screenHeight / 6) + 20; // Restrict to upper screen
const endY = Math.random() * (screenHeight / 6) + 20; // Restrict to upper quarter const endY = Math.random() * (screenHeight / 6) + 20; // Restrict to upper screen
const angle = Math.random() * 20 - 10; // -10 to 10 degrees const angle = Math.random() * 20 - 10; // -10 to 10 degrees
santa.style.left = `${startX}px`; santa.style.left = `${startX}px`;
santa.style.top = `${startY}px`; santa.style.top = `${startY}px`;
santa.style.transform = `rotate(${angle}deg) ${fromLeft ? 'scaleX(-1)' : 'scaleX(1)'}`; // Mirror if not from left santa.style.transform = `rotate(${angle}deg) ${fromLeft ? 'scaleX(-1)' : 'scaleX(1)'}`; // Mirror if not from left
const duration = 10000; // 10 seconds let duration;
if (isMobile) {
duration = santaSpeedMobile * 1000;
} else {
duration = santaSpeed * 1000;
}
const deltaX = endX - startX; const deltaX = endX - startX;
const deltaY = endY - startY; const deltaY = endY - startY;
const startTime = performance.now(); const startTime = performance.now();
@@ -230,20 +247,19 @@ function animateSanta() {
const elapsed = currentTime - startTime; const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1); const progress = Math.min(elapsed / duration, 1);
const currentY = startY + deltaY * progress - 50 * Math.sin(progress * Math.PI); // Adjusted for limited height const currentY = startY + deltaY * progress - 50 * Math.sin(progress * Math.PI);
santa.style.left = `${startX + deltaX * progress}px`; santa.style.left = `${startX + deltaX * progress}px`;
santa.style.top = `${currentY}px`; santa.style.top = `${currentY}px`;
if (Math.random() < 0.05) { // 25% chance to drop a present if (Math.random() < 0.05) { // 5% chance to drop a present
dropPresent(santa, fromLeft); dropPresent(santa, fromLeft);
} }
if (progress < 1) { if (progress < 1) {
animationFrameIdSanta = requestAnimationFrame(move); animationFrameIdSanta = requestAnimationFrame(move);
} else { } else {
santa.remove(); const pause = Math.random() * ((maxSantaRestTime - minSantaRestTime) * 1000) + minSantaRestTime * 1000;
const pause = Math.random() * 5000 + 3000; // 3-8 seconds pause setTimeout(animateSanta, pause);
animationFrameIdSanta = setTimeout(animateSanta, pause);
} }
} }
@@ -267,6 +283,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (container) { if (container) {
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
if (screenWidth < 768) { // lower count of snowflakes on mobile devices if (screenWidth < 768) { // lower count of snowflakes on mobile devices
isMobile = true;
console.log('Mobile device detected. Reducing snowflakes count.'); console.log('Mobile device detected. Reducing snowflakes count.');
snowflakesCount = snowflakesCountMobile; snowflakesCount = snowflakesCountMobile;
} }
@@ -274,6 +291,7 @@ document.addEventListener('DOMContentLoaded', () => {
console.log('Santa enabled.'); console.log('Santa enabled.');
initializeCanvas(); initializeCanvas();
snowflakes = createSnowflakes(container); snowflakes = createSnowflakes(container);
createSantaElement();
animateAll(); animateAll();
animateSanta(); animateSanta();
} }