diff --git a/autumn.css b/autumn.css index eec6826..fe4b966 100644 --- a/autumn.css +++ b/autumn.css @@ -13,10 +13,14 @@ font-family: Arial, sans-serif; text-shadow: 0 0 5px #000; user-select: none; + -webkit-animation-name: leaf-fall, leaf-shake; + -webkit-animation-duration: 10s, 6s; + -webkit-animation-timing-function: linear, ease-in-out; + -webkit-animation-iteration-count: infinite, infinite; -webkit-user-select: none; cursor: default; animation-name: leaf-fall, leaf-shake; - animation-duration: 10s, 3s; + animation-duration: 10s, 6s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; } diff --git a/autumn.js b/autumn.js index 9434200..4bbafbd 100644 --- a/autumn.js +++ b/autumn.js @@ -45,9 +45,9 @@ observer.observe(document.body, { /* const images = [ - "/web/seasonal/ghost_20x20.png", - "/web/seasonal/bat_20x20.png", - "/web/seasonal/pumpkin_20x20.png", + "./web/seasonal/ghost_20x20.png", + "./web/seasonal/bat_20x20.png", + "./web/seasonal/pumpkin_20x20.png", ];*/ const images = [ "./images/ghost_20x20.png", @@ -65,35 +65,34 @@ function addRandomLeaves(count) { // Array of leave characters for (let i = 0; i < count; i++) { // create a new leave element - const leave = document.createElement('div'); - leave.classList.add('leave'); + const leaveDiv = document.createElement('div'); + leaveDiv.classList.add('leave'); + + // pick a random leaf symbol + const imageSrc = images[Math.floor(Math.random() * images.length)]; + const img = document.createElement("img"); + img.src = imageSrc; + + leaveDiv.appendChild(img); - // pick a random leave symbol - if (enableColoredSnowflakes) { - leave.textContent = autumnSymbolsMobile[Math.floor(Math.random() * autumnSymbolsMobile.length)]; - } else { - leave.textContent = autumnSymbols[Math.floor(Math.random() * autumnSymbols.length)]; - } // set random horizontal position, animation delay and size(uncomment lines to enable) const randomLeft = Math.random() * 100; // position (0% to 100%) - //const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size - const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s) - const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s) + const randomAnimationDelay = Math.random() * 10; // delay (0s to 10s) + const randomAnimationDelay2 = Math.random() * 6; // delay (0s to 6s) // apply styles - leave.style.left = `${randomLeft}%`; - //leave.style.fontSize = `${randomSize}em`; //uncomment to enable random size - leave.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`; + leaveDiv.style.left = `${randomLeft}%`; + leaveDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`; // add the leave to the container - autumnContainer.appendChild(leave); + autumnContainer.appendChild(leaveDiv); } console.log('Random leaves added'); } // initialize standard leaves -function initSnowflakes() { +function initLeaves() { const container = document.querySelector('.autumn-container') || document.createElement("div"); if (!document.querySelector('.autumn-container')) { @@ -102,28 +101,26 @@ function initSnowflakes() { document.body.appendChild(container); } - for (let i = 0; i < 1; i++) { - images.forEach(imageSrc => { - const leafDiv = document.createElement("div"); - leafDiv.className = "leaf"; + for (let i = 0; i < 12; i++) { + const leafDiv = document.createElement("div"); + leafDiv.className = "leaf"; - const img = document.createElement("img"); - img.src = imageSrc; + const img = document.createElement("img"); + img.src = images[Math.floor(Math.random() * images.length)]; - leafDiv.appendChild(img); - container.appendChild(leafDiv); - }); + leafDiv.appendChild(img); + container.appendChild(leafDiv); } } // initialize leaves and add random leaves after the DOM is loaded document.addEventListener('DOMContentLoaded', () => { if (!leaves) return; // exit if leaves are disabled - initSnowflakes(); - toggleSnowflakes(); + initLeaves(); + toggleAutumn(); const screenWidth = window.innerWidth; // get the screen width to detect mobile devices - if (randomSnowflakes && (screenWidth > 768 || randomSnowflakesMobile)) { // add random leaves only on larger screens, unless enabled for mobile devices - addRandomSnowflakes(snowflakeCount); + if (randomLeaves && (screenWidth > 768 || randomLeavesMobile)) { // add random leaves only on larger screens, unless enabled for mobile devices + addRandomLeaves(leafCount); } }); \ No newline at end of file