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

enable/disable colored snowflakes

Browse Source
This commit is contained in:
MLH
2024-11-26 16:24:56 +01:00
parent a3d8c9d9aa
commit c3500ebce1
2 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
add_to_index_html.html
View File

@@ -3,14 +3,14 @@
<div class="snowflakes" aria-hidden="true"> <div class="snowflakes" aria-hidden="true">
<div class="snowflake"> ❅ </div> <div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div>
<div class="snowflake"> ❄ </div>
<div class="snowflake"> ❅ </div> <div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div>
<div class="snowflake"> ❄ </div>
<div class="snowflake"> ❅ </div> <div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div>
<div class="snowflake"> ❄ </div>
<div class="snowflake"> ❅ </div> <div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div>
<div class="snowflake"> ❄ </div> <div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div>
<div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div>
</div> </div>

8
snowflakes.js
View File

@@ -1,5 +1,6 @@
const snowflakes = true; // enable/disable snowflakes const snowflakes = true; // enable/disable snowflakes
const randomSnowflakes = true; // enable random Snowflakes const randomSnowflakes = true; // enable random Snowflakes
const enableColoredSnowflakes = true; // enable colored snowflakes on mobile devices
const snowflakeCount = 25; // count of random extra snowflakes const snowflakeCount = 25; // count of random extra snowflakes
@@ -47,7 +48,8 @@ function addRandomSnowflakes(count) {
console.log('Adding random snowflakes'); console.log('Adding random snowflakes');
const snowflakeSymbols = ['❅', '❆', '❄']; // some snowflake symbols const snowflakeSymbols = ['❅', '❆']; // some snowflake symbols
const snowflakeSymbolsMobile = ['❅', '❆', '❄']; // some snowflake symbols mobile version
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
// create a new snowflake element // create a new snowflake element
@@ -55,7 +57,11 @@ function addRandomSnowflakes(count) {
snowflake.classList.add('snowflake'); snowflake.classList.add('snowflake');
// pick a random snowflake symbol // pick a random snowflake symbol
if (enableColoredSnowflakes) {
snowflake.textContent = snowflakeSymbolsMobile[Math.floor(Math.random() * snowflakeSymbolsMobile.length)];
} else {
snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)]; snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
}
// 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%)