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

advanced #1

Merged
CodeDevMLH merged 8 commits from advanced into main 2024-12-17 00:54:55 +01:00
Conversation 0 Commits 8 Files Changed 3 +149 -110
3 changed files with 149 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fa329c5e9c - Show all commits

104
fireworks.css
View File

@@ -1,73 +1,59 @@
/* container for fireworks */
.fireworks { .fireworks {
pointer-events: none; /*position: fixed;*/
position: fixed; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100%;
height: 100vh; height: 100%;
overflow: hidden; pointer-events: none;
z-index: 10; /* put it on top */ /*overflow: hidden;*/
} z-index: 10;
/* every firework particle */
.firework {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color);
animation: move 2.5s ease-out, fadeOut 2.5s ease-out, shrink 2.5s ease-out;
/*animation: explode 2.5s ease-out forwards, colorShift 2.5s linear infinite;*/
transform-origin: center;
}
/* every rocket */
.rocket {
position: absolute;
width: 4px;
height: 20px;
background: var(--color);
border-radius: 2px;
animation: rise 1s ease-out;
}
/* movement of particles */
@keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(var(--x), var(--y));
}
} }
/* fadeout of particles */ .rocket-trail {
@keyframes fadeOut { position: absolute;
from { left: var(--trailX);
top: var(--trailStartY);
width: 4px;
/*height: 4px;*/
height: 60px;
/*background: white;*/
background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
filter: blur(2px);
/*border-radius: 50%;
box-shadow: 0 0 8px 2px white;*/
animation: rocket-trail-animation 1s linear forwards;
}
@keyframes rocket-trail-animation {
0% {
transform: translateY(0);
opacity: 1; opacity: 1;
} }
to { 100% {
transform: translateY(calc(var(--trailEndY) - var(--trailStartY)));
opacity: 0; opacity: 0;
} }
} }
/* shrinking of particles */ /* Animation für die Partikel */
@keyframes shrink { @keyframes fireworkParticle {
from { 0% {
transform: scale(1); opacity: 1;
transform: translate(0, 0);
} }
to { 100% {
transform: scale(0.5); opacity: 0;
transform: translate(var(--x), var(--y));
} }
} }
/* movement of rockets */ .firework {
@keyframes rise { position: absolute;
from { width: 5px;
transform: translate(0, 100vh); height: 5px;
} background: white;
to { border-radius: 50%;
transform: translate(0, var(--y)); animation: fireworkParticle 1.5s ease-out forwards;
} filter: blur(1px);
} }

137
fireworks.js
View File

@@ -1,6 +1,17 @@
const fireworks = true; // enable/disable fireworks const fireworks = true; // enable/disable fireworks
const scrollFireworks = true; // enable fireworks to scroll with page content
const particlesPerFirework = 50; // count of particles per firework const particlesPerFirework = 50; // count of particles per firework
// array of color palettes for the fireworks
const colorPalettes = [
['#ff0000', '#ff7300', '#ff4500'], // red's
['#0040ff', '#5a9bff', '#b0d9ff'], // blue's
['#47ff00', '#8eff47', '#00ff7f'], // green's
['#ffd700', '#c0c0c0', '#ff6347'], // gold, silver, red
['#ff00ff', '#ff99ff', '#800080'], // magenta's
['#ffef00', '#ffff99', '#ffd700'], // yellow's
];
let msgPrinted = false; // flag to prevent multiple console messages let msgPrinted = false; // flag to prevent multiple console messages
// function to check and control fireworks // function to check and control fireworks
@@ -41,73 +52,97 @@ observer.observe(document.body, {
attributes: true // observe changes to attributes (e.g. class changes) attributes: true // observe changes to attributes (e.g. class changes)
}); });
// function to add random fireworks
// Funktion, um einen Schweif zu erzeugen
function createRocketTrail(x, startY, endY) {
const fireworkContainer = document.querySelector('.fireworks');
const rocketTrail = document.createElement('div');
rocketTrail.classList.add('rocket-trail');
fireworkContainer.appendChild(rocketTrail);
// Setze Position und Animation
rocketTrail.style.setProperty('--trailX', `${x}px`);
rocketTrail.style.setProperty('--trailStartY', `${startY}px`);
rocketTrail.style.setProperty('--trailEndY', `${endY}px`);
// Entferne das Element nach der Animation
setTimeout(() => {
fireworkContainer.removeChild(rocketTrail);
}, 2000); // Dauer der Animation
}
// Funktion für die Partikel-Explosion
function createExplosion(x, y) {
const fireworkContainer = document.querySelector('.fireworks');
// Wähle eine zufällige Farbkombination
const chosenPalette = colorPalettes[Math.floor(Math.random() * colorPalettes.length)];
for (let i = 0; i < particlesPerFirework; i++) {
const particle = document.createElement('div');
particle.classList.add('firework');
const angle = Math.random() * 2 * Math.PI; // Zufällige Richtung
const distance = Math.random() * 180 + 100; // Zufällige Distanz
const xOffset = Math.cos(angle) * distance;
const yOffset = Math.sin(angle) * distance;
particle.style.left = `${x}px`;
particle.style.top = `${y}px`;
particle.style.setProperty('--x', `${xOffset}px`);
particle.style.setProperty('--y', `${yOffset}px`);
particle.style.background = chosenPalette[Math.floor(Math.random() * chosenPalette.length)];
fireworkContainer.appendChild(particle);
// Entferne Partikel nach der Animation
setTimeout(() => particle.remove(), 3000);
}
}
// Funktion für das Feuerwerk mit Schweif
function launchFirework() { function launchFirework() {
const fireworkContainer = document.querySelector('.fireworks'); const fireworkContainer = document.querySelector('.fireworks');
if (!fireworkContainer) return; if (!fireworkContainer) return;
// some colors for the fireworks // Zufällige horizontale Position
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff']; //const x = Math.random() * window.innerWidth * 0.7 + window.innerWidth * 0.15;
const x = Math.random() * window.innerWidth; // Beliebiger Wert auf der gesamten Breite
// random position on the screen // Schweif startet unten und endet auf einer zufälligen Höhe um die Mitte
const x = Math.random() * window.innerWidth * 0.7 + window.innerWidth * 0.15; let startY, endY;
const y = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.25; if (scrollFireworks) {
// Y-Position berücksichtigt das Scrollen
// get random color for the whole firework startY = window.scrollY + window.innerHeight; // Unterkante des Fensters plus der Scroll-Offset
const fireworkColor = colors[Math.floor(Math.random() * colors.length)]; endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2 + window.scrollY; // Bereich um die Mitte, aber auch mit Scrollen
} else {
// create rocket element startY = window.innerHeight; // Unterkante des Fensters
const rocket = document.createElement('div'); endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Bereich um die Mitte
rocket.classList.add('rocket'); }
rocket.style.left = `${x}px`; //console.log(startY, endY);
rocket.style.bottom = `0px`;
rocket.style.setProperty('--color', fireworkColor); // Schweif erzeugen
rocket.style.setProperty('--y', `-${window.innerHeight - y}px`); // rocket animation from bottom to explosion position createRocketTrail(x, startY, endY);
fireworkContainer.appendChild(rocket);
// Explosion erzeugen
setTimeout(() => { setTimeout(() => {
rocket.remove(); createExplosion(x, endY); // Explosion an der Endhöhe
}, 1000); // or 1200
// create particles for the firework
for (let i = 0; i < particlesPerFirework; i++) {
const particle = document.createElement('div');
particle.classList.add('firework');
// random angle and distance
const angle = Math.random() * 2 * Math.PI; // 0 to 360 degrees
const distance = Math.random() * 150 + 100; // 50 to 150 pixels
const xOffset = Math.cos(angle) * distance;
const yOffset = Math.sin(angle) * distance;
// set particle properties
particle.style.left = `${x}px`;
particle.style.top = `${y}px`;
particle.style.setProperty('--x', `${xOffset}px`);
particle.style.setProperty('--y', `${yOffset}px`);
particle.style.setProperty('--color', fireworkColor);
// add particle to the container
fireworkContainer.appendChild(particle);
// remove particle after animation ends so the DOM doesn't get filled with particles after 3 seconds
setTimeout(() => {
particle.remove();
}, 3000); // Animationduration about 2.5 seconds
}
}, 1500); // delay for the rocket to reach the top of the screen
} }
// automaticly start fireworks // Startet die Feuerwerksroutine
function startFireworks() { function startFireworks() {
fireworksInterval = setInterval(() => { fireworksInterval = setInterval(() => {
const randomCount = Math.random() * 3 + 2; // 2 to 5 fireworks simultaneously const randomCount = Math.floor(Math.random() * 4) + 4;
for (let i = 0; i < randomCount; i++) { for (let i = 0; i < randomCount; i++) {
launchFirework(); launchFirework();
} }
}, 1800) // firework every 600 mil second }, 1800);
} }
// initialize snowflakes and add random snowflakes after the DOM is loaded // initialize snowflakes and add random snowflakes after the DOM is loaded
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
if (!fireworks) return; // exit if fireworks are disabled if (!fireworks) return; // exit if fireworks are disabled

18
test-site.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fireworks Display</title>
<link rel="stylesheet" href="fireworks.css">
</head>
<style>
body {
background-color: black;
}
</style>
<body>
<div class="fireworks" aria-hidden="true"></div>
<script src="fireworks.js"></script>
</body>
</html>