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

add random duration

Browse Source
This commit is contained in:
MLH
2024-12-22 00:40:48 +01:00
parent 20da20daa9
commit 23ab4f5e82
1 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
hearts.js
View File

@@ -1,6 +1,7 @@
const hearts = true; // enable/disable hearts const hearts = true; // enable/disable hearts
const randomSymbols = true; // enable more random symbols const randomSymbols = true; // enable more random symbols
const randomSymbolsMobile = false; // enable random symbols on mobile devices const randomSymbolsMobile = false; // enable random symbols on mobile devices
const enableDiffrentDuration = true; // enable different animation duration for random symbols
const heartsCount = 25; // count of random extra symbols const heartsCount = 25; // count of random extra symbols
let msgPrinted = false; // flag to prevent multiple console messages let msgPrinted = false; // flag to prevent multiple console messages
@@ -42,8 +43,8 @@ observer.observe(document.body, {
}); });
// Array of hearts characters // Array of hearts characters
const heartSymbols = ['❤️', '💕', '💞', '💓', '💗', '💖']; const heartSymbols = ['❤️', '💕', '💞', '💓', '💗', '💖'];
function addRandomSymbols(count) { function addRandomSymbols(count) {
@@ -63,15 +64,20 @@ function addRandomSymbols(count) {
// set random horizontal position, animation delay and size(uncomment lines to enable) // set random horizontal position, animation delay and size(uncomment lines to enable)
const randomLeft = Math.random() * 100; // position (0% to 100%) 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() * 14; // delay (0s to 14s) const randomAnimationDelay = Math.random() * 14; // delay (0s to 14s)
const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s) const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
// apply styles // apply styles
heartsDiv.style.left = `${randomLeft}%`; heartsDiv.style.left = `${randomLeft}%`;
//snowflake.style.fontSize = `${randomSize}em`; //uncomment to enable random size
heartsDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`; heartsDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
// set random animation duration
if (enableDiffrentDuration) {
const randomAnimationDuration = Math.random() * 16 + 12; // delay (12s to 16s)
const randomAnimationDuration2 = Math.random() * 7 + 3; // delay (3s to 7s)
heartsDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
}
// add the hearts to the container // add the hearts to the container
heartsContainer.appendChild(heartsDiv); heartsContainer.appendChild(heartsDiv);
} }
@@ -93,6 +99,13 @@ function createHearts() {
heartsDiv.className = "heart"; heartsDiv.className = "heart";
heartsDiv.textContent = heartSymbols[i % heartSymbols.length]; heartsDiv.textContent = heartSymbols[i % heartSymbols.length];
// set random animation duration
if (enableDiffrentDuration) {
const randomAnimationDuration = Math.random() * 16 + 12; // delay (12s to 16s)
const randomAnimationDuration2 = Math.random() * 7 + 3; // delay (3s to 7s)
heartsDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
}
container.appendChild(heartsDiv); container.appendChild(heartsDiv);
} }
} }