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

first working

Browse Source
This commit is contained in:
MLH
2025-01-26 03:51:43 +01:00
parent f577c7535c
commit d307249474
2 changed files with 38 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
seperate single seasonals/Seasonals-Santa/santa.css
View File

@ -18,18 +18,16 @@
.santa {
position: fixed;
width: 100px;
width: 220px;
height: auto;
z-index: 1000;
pointer-events: none;
transition: transform 0.3s;
}
.present {
position: fixed;
width: 50px;
width: 15px;
height: auto;
z-index: 999;
pointer-events: none;
transition: top linear, opacity linear;
}

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

@ -7,6 +7,7 @@ let msgPrinted = false; // flag to prevent multiple console messages
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
// function to check and control the santa
function toggleSnowfall() {
@ -177,45 +178,42 @@ function createSantaElement() {
return santa;
}
function dropPresent(santa) {
function dropPresent(santa, fromLeft) {
const presentSrc = presentImages[Math.floor(Math.random() * presentImages.length)];
const present = document.createElement('img');
present.src = presentImages[Math.floor(Math.random() * presentImages.length)];
present.src = presentSrc;
present.classList.add('present');
const santaContainer = document.querySelector('.santa-container');
santaContainer.appendChild(present);
// Position present at Santa's current location
const rect = santa.getBoundingClientRect();
present.style.left = `${rect.left + rect.width / 2}px`;
present.style.top = `${rect.top + rect.height}px`;
// Calculate fall duration based on Santa's current height with variation
const fallDistance = window.innerHeight - rect.top - rect.height;
const baseDuration = fallDistance / 100; // 1 second per 100px
const variation = Math.random() * 2000 - 1000; // ±1 second
const fallDuration = baseDuration * 1000 + variation;
// Animate present falling
present.style.transition = `top ${fallDuration}ms linear, opacity ${fallDuration}ms linear`;
present.style.top = `${window.innerHeight}px`;
present.style.opacity = '0';
// Remove present after animation
setTimeout(() => {
santa.parentElement.appendChild(present);
// 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';
// Start falling
requestAnimationFrame(() => {
present.style.top = `${window.innerHeight}px`;
});
// Remove from DOM after animation
present.addEventListener('transitionend', () => {
present.remove();
}, fallDuration);
});
}
function animateSanta() {
const santa = createSantaElement();
const santaContainer = document.querySelector('.santa-container');
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
const fromLeft = Math.random() < 0.5;
const startX = fromLeft ? -100 : screenWidth + 100;
const endX = fromLeft ? screenWidth + 100 : -100;
const startY = Math.random() * (screenHeight / 2);
const endY = Math.random() * (screenHeight / 2);
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 angle = Math.random() * 20 - 10; // -10 to 10 degrees
santa.style.left = `${startX}px`;
@ -232,27 +230,24 @@ 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
santa.style.left = `${startX + deltaX * progress}px`;
santa.style.top = `${startY + deltaY * progress - 100 * Math.sin(progress * Math.PI)}px`; // Parabolic path
santa.style.top = `${currentY}px`;
if (Math.random() < 0.05) { // 25% chance to drop a present
dropPresent(santa, fromLeft);
}
if (progress < 1) {
requestAnimationFrame(move);
animationFrameIdSanta = requestAnimationFrame(move);
} else {
santa.remove();
const pause = Math.random() * 5000 + 3000; // 3-8 seconds pause
setTimeout(animateSanta, pause);
animationFrameIdSanta = setTimeout(animateSanta, pause);
}
}
requestAnimationFrame(move);
// Drop presents every 2 seconds
const dropInterval = setInterval(() => dropPresent(santa), 2000);
// Clear interval after animation completes
setTimeout(() => {
clearInterval(dropInterval);
}, duration);
animationFrameIdSanta = requestAnimationFrame(move);
}