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

working

Browse Source
This commit is contained in:
MLH
2024-12-20 23:47:18 +01:00
parent cfa47c21f2
commit ad38ba12ed
4 changed files with 19 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
add_to_index_html.html
View File

@ -1,3 +1,3 @@
<script src="/seasonals/halloween.js"></script> <script src="/seasonals/hearts.js"></script>
<link rel="stylesheet" href="/seasonal/halloween.css"> <link rel="stylesheet" href="/seasonal/hearts.css">
<div class="halloween-container"></div> <div class="hearts-container"></div>

4
hearts.css
View File

@ -15,11 +15,11 @@
user-select: none; user-select: none;
cursor: default; cursor: default;
-webkit-animation-name: heart-fall, heart-shake; -webkit-animation-name: heart-fall, heart-shake;
-webkit-animation-duration: 16s, 5s; -webkit-animation-duration: 14s, 5s;
-webkit-animation-timing-function: linear, ease-in-out; -webkit-animation-timing-function: linear, ease-in-out;
-webkit-animation-iteration-count: infinite, infinite; -webkit-animation-iteration-count: infinite, infinite;
animation-name: heart-fall, heart-shake; animation-name: heart-fall, heart-shake;
animation-duration: 10s, 5s; animation-duration: 14s, 5s;
animation-timing-function: linear, ease-in-out; animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite; animation-iteration-count: infinite, infinite;
} }

32
hearts.js
View File

@ -41,13 +41,9 @@ observer.observe(document.body, {
attributes: true // observe changes to attributes (e.g. class changes) attributes: true // observe changes to attributes (e.g. class changes)
}); });
/*
const images = [ // Array of hearts characters
"/web/seasonal/ghost_20x20.png", const heartSymbols = ['❤️', '💕', '💞', '💓', '💗', '💖'];
];*/
const images = [
"./images/heart_20x20.png",
];
// create hearts objects // create hearts objects
function createHearts() { function createHearts() {
@ -59,15 +55,11 @@ function createHearts() {
document.body.appendChild(container); document.body.appendChild(container);
} }
// Array of snowflake characters
const snowflakeSymbols = ['❤️', '💕', '💞', '💓', '💗', '💖'];
for (let i = 0; i < 12; i++) { for (let i = 0; i < 12; i++) {
const heartsDiv = document.createElement("div"); const heartsDiv = document.createElement("div");
heartsDiv.className = "hearts"; heartsDiv.className = "heart";
heartsDiv.textContent = heartSymbols[i % heartSymbols.length];
heartsDiv.appendChild(img);
container.appendChild(heartsDiv); container.appendChild(heartsDiv);
} }
} }
@ -77,30 +69,26 @@ function addRandomSymbols(count) {
const heartsContainer = document.querySelector('.hearts-container'); // get the hearts container const heartsContainer = document.querySelector('.hearts-container'); // get the hearts container
if (!heartsContainer) return; // exit if hearts container is not found if (!heartsContainer) return; // exit if hearts container is not found
console.log('Adding random hearts symbols'); console.log('Adding random heart symbols');
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
// create a new hearts elements // create a new hearts elements
const heartsDiv = document.createElement("div"); const heartsDiv = document.createElement("div");
heartsDiv.className = "hearts"; heartsDiv.className = "heart";
// pick a random hearts symbol // pick a random hearts symbol
const imageSrc = images[Math.floor(Math.random() * images.length)]; heartsDiv.textContent = heartSymbols[Math.floor(Math.random() * heartSymbols.length)];
const img = document.createElement("img");
img.src = imageSrc;
heartsDiv.appendChild(img);
// 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 randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size
const randomAnimationDelay = Math.random() * 16; // delay (0s to 16s) 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`;
// add the hearts to the container // add the hearts to the container

8
test-site.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halloween Display</title> <title>Hearts Display</title>
<style> <style>
body { body {
@ -14,9 +14,9 @@
</head> </head>
<body> <body>
<link rel="stylesheet" href="halloween.css"> <link rel="stylesheet" href="hearts.css">
<script src="halloween.js"></script> <script src="hearts.js"></script>
<div class="halloween-container" aria-hidden="true"></div> <div class="hearts-container" aria-hidden="true"></div>
</body> </body>
</html> </html>