..
This commit is contained in:
@ -39,8 +39,6 @@ function toggleSnowfall() {
|
|||||||
initializeCanvas();
|
initializeCanvas();
|
||||||
snowflakes = createSnowflakes(santaContainer);
|
snowflakes = createSnowflakes(santaContainer);
|
||||||
animateAll();
|
animateAll();
|
||||||
} else {
|
|
||||||
console.warn('could not initialize santa: animation frame is already running');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (msgPrinted) {
|
if (msgPrinted) {
|
||||||
@ -152,22 +150,6 @@ function updateSnowflakes() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// credits: flaticon.com
|
|
||||||
const presentImages = [
|
|
||||||
'images/gift1.png',
|
|
||||||
'images/gift2.png',
|
|
||||||
'images/gift3.png',
|
|
||||||
'images/gift4.png',
|
|
||||||
'images/gift5.png',
|
|
||||||
'images/gift6.png',
|
|
||||||
'images/gift7.png',
|
|
||||||
'images/gift8.png',
|
|
||||||
];
|
|
||||||
|
|
||||||
// credits: https://www.animatedimages.org/img-animated-santa-claus-image-0420-85884.htm
|
|
||||||
const santaImage = 'images/santa.gif';
|
|
||||||
|
|
||||||
/*
|
|
||||||
// credits: flaticon.com
|
// credits: flaticon.com
|
||||||
const presentImages = [
|
const presentImages = [
|
||||||
'seasonals/santa_images/gift1.png',
|
'seasonals/santa_images/gift1.png',
|
||||||
@ -182,7 +164,7 @@ const presentImages = [
|
|||||||
|
|
||||||
// credits: https://www.animatedimages.org/img-animated-santa-claus-image-0420-85884.htm
|
// 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';
|
||||||
*/
|
|
||||||
|
|
||||||
function createSantaElement() {
|
function createSantaElement() {
|
||||||
const santa = document.createElement('img');
|
const santa = document.createElement('img');
|
||||||
@ -217,54 +199,74 @@ function dropPresent(santa, fromLeft) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function reloadSantaGif() {
|
||||||
|
const santa = document.querySelector('.santa');
|
||||||
|
const src = santa.src;
|
||||||
|
santa.src = '';
|
||||||
|
santa.src = src;
|
||||||
|
}
|
||||||
|
|
||||||
function animateSanta() {
|
function animateSanta() {
|
||||||
const santa = document.querySelector('.santa');
|
const santa = document.querySelector('.santa');
|
||||||
const screenWidth = window.innerWidth;
|
|
||||||
const screenHeight = window.innerHeight;
|
function startAnimation() {
|
||||||
const fromLeft = Math.random() < 0.5;
|
const santaHeight = santa.offsetHeight;
|
||||||
const startX = fromLeft ? -220 : screenWidth + 220;
|
if (santaHeight === 0) {
|
||||||
const endX = fromLeft ? screenWidth + 220 : -220;
|
setTimeout(startAnimation, 100);
|
||||||
const santaHeight = santa.offsetHeight;
|
return;
|
||||||
const startY = Math.random() * (screenHeight / 5 - santaHeight - 50) + 50; // Restrict to upper screen
|
|
||||||
const endY = Math.random() * (screenHeight / 5 - santaHeight - 50) + 50; // 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
|
|
||||||
|
|
||||||
let duration;
|
|
||||||
if (isMobile) {
|
|
||||||
duration = santaSpeedMobile * 1000;
|
|
||||||
} else {
|
|
||||||
duration = santaSpeed * 1000;
|
|
||||||
}
|
|
||||||
const deltaX = endX - startX;
|
|
||||||
const deltaY = endY - startY;
|
|
||||||
const startTime = performance.now();
|
|
||||||
|
|
||||||
function move() {
|
|
||||||
const currentTime = performance.now();
|
|
||||||
const elapsed = currentTime - startTime;
|
|
||||||
const progress = Math.min(elapsed / duration, 1);
|
|
||||||
|
|
||||||
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) { // 5% chance to drop a present
|
|
||||||
dropPresent(santa, fromLeft);
|
|
||||||
}
|
}
|
||||||
|
// console.log('Santa height: ', santaHeight);
|
||||||
|
|
||||||
if (progress < 1) {
|
const screenWidth = window.innerWidth;
|
||||||
animationFrameIdSanta = requestAnimationFrame(move);
|
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 / 5) + santaHeight; // Restrict to upper screen
|
||||||
|
const endY = Math.random() * (screenHeight / 5) + santaHeight; // Restrict to upper screen
|
||||||
|
const angle = Math.random() * 16 - 8; // -8 to 8 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
|
||||||
|
|
||||||
|
let duration;
|
||||||
|
if (isMobile) {
|
||||||
|
duration = santaSpeedMobile * 1000;
|
||||||
} else {
|
} else {
|
||||||
const pause = Math.random() * ((maxSantaRestTime - minSantaRestTime) * 1000) + minSantaRestTime * 1000;
|
duration = santaSpeed * 1000;
|
||||||
setTimeout(animateSanta, pause);
|
|
||||||
}
|
}
|
||||||
|
const deltaX = endX - startX;
|
||||||
|
const deltaY = endY - startY;
|
||||||
|
const startTime = performance.now();
|
||||||
|
|
||||||
|
function move() {
|
||||||
|
const currentTime = performance.now();
|
||||||
|
const elapsed = currentTime - startTime;
|
||||||
|
const progress = Math.min(elapsed / duration, 1);
|
||||||
|
|
||||||
|
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) { // 5% chance to drop a present
|
||||||
|
dropPresent(santa, fromLeft);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress < 1) {
|
||||||
|
animationFrameIdSanta = requestAnimationFrame(move);
|
||||||
|
} else {
|
||||||
|
const pause = Math.random() * ((maxSantaRestTime - minSantaRestTime) * 1000) + minSantaRestTime * 1000;
|
||||||
|
setTimeout(animateSanta, pause);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
animationFrameIdSanta = requestAnimationFrame(move);
|
||||||
}
|
}
|
||||||
|
|
||||||
animationFrameIdSanta = requestAnimationFrame(move);
|
reloadSantaGif();
|
||||||
|
|
||||||
|
startAnimation();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user