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 { .santa {
position: fixed; position: fixed;
width: 100px; width: 220px;
height: auto; height: auto;
z-index: 1000; z-index: 1000;
pointer-events: none; pointer-events: none;
transition: transform 0.3s;
} }
.present { .present {
position: fixed; position: fixed;
width: 50px; width: 15px;
height: auto; height: auto;
z-index: 999; z-index: 999;
pointer-events: none; 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 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
// function to check and control the santa // function to check and control the santa
function toggleSnowfall() { function toggleSnowfall() {
@@ -177,45 +178,42 @@ function createSantaElement() {
return santa; return santa;
} }
function dropPresent(santa) { function dropPresent(santa, fromLeft) {
const presentSrc = presentImages[Math.floor(Math.random() * presentImages.length)];
const present = document.createElement('img'); const present = document.createElement('img');
present.src = presentImages[Math.floor(Math.random() * presentImages.length)]; present.src = presentSrc;
present.classList.add('present'); present.classList.add('present');
const santaContainer = document.querySelector('.santa-container'); santa.parentElement.appendChild(present);
santaContainer.appendChild(present);
// Get Santa's position
// Position present at Santa's current location const santaRect = santa.getBoundingClientRect();
const rect = santa.getBoundingClientRect(); // present.style.left = `${santaRect.left + santaRect.width / 2}px`;
present.style.left = `${rect.left + rect.width / 2}px`; // present.style.top = `${santaRect.bottom}px`;
present.style.top = `${rect.top + rect.height}px`; present.style.left = `${santaRect.left + santaRect.width / 2}px`;
present.style.top = `${santaRect.bottom}px`;
// Calculate fall duration based on Santa's current height with variation
const fallDistance = window.innerHeight - rect.top - rect.height; present.style.transition = 'top 2s linear';
const baseDuration = fallDistance / 100; // 1 second per 100px
const variation = Math.random() * 2000 - 1000; // ±1 second // Start falling
const fallDuration = baseDuration * 1000 + variation; requestAnimationFrame(() => {
present.style.top = `${window.innerHeight}px`;
// Animate present falling });
present.style.transition = `top ${fallDuration}ms linear, opacity ${fallDuration}ms linear`;
present.style.top = `${window.innerHeight}px`; // Remove from DOM after animation
present.style.opacity = '0'; present.addEventListener('transitionend', () => {
// Remove present after animation
setTimeout(() => {
present.remove(); present.remove();
}, fallDuration); });
} }
function animateSanta() { function animateSanta() {
const santa = createSantaElement(); const santa = createSantaElement();
const santaContainer = document.querySelector('.santa-container');
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 ? -100 : screenWidth + 100; const startX = fromLeft ? -220 : screenWidth + 220;
const endX = fromLeft ? screenWidth + 100 : -100; const endX = fromLeft ? screenWidth + 220 : -220;
const startY = Math.random() * (screenHeight / 2); const startY = Math.random() * (screenHeight / 6) + 20; // Restrict to upper quarter
const endY = Math.random() * (screenHeight / 2); const endY = Math.random() * (screenHeight / 6) + 20; // Restrict to upper quarter
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`;
@@ -232,27 +230,24 @@ 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
santa.style.left = `${startX + deltaX * progress}px`; 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) { if (progress < 1) {
requestAnimationFrame(move); animationFrameIdSanta = requestAnimationFrame(move);
} else { } else {
santa.remove(); santa.remove();
const pause = Math.random() * 5000 + 3000; // 3-8 seconds pause const pause = Math.random() * 5000 + 3000; // 3-8 seconds pause
setTimeout(animateSanta, pause); animationFrameIdSanta = setTimeout(animateSanta, pause);
} }
} }
requestAnimationFrame(move); animationFrameIdSanta = requestAnimationFrame(move);
// Drop presents every 2 seconds
const dropInterval = setInterval(() => dropPresent(santa), 2000);
// Clear interval after animation completes
setTimeout(() => {
clearInterval(dropInterval);
}, duration);
} }