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