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 {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 10; /* put it on top */
}
/* 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));
}
/*position: fixed;*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
/*overflow: hidden;*/
z-index: 10;
}
/* fadeout of particles */
@keyframes fadeOut {
from {
.rocket-trail {
position: absolute;
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;
}
to {
100% {
transform: translateY(calc(var(--trailEndY) - var(--trailStartY)));
opacity: 0;
}
}
/* shrinking of particles */
@keyframes shrink {
from {
transform: scale(1);
/* Animation für die Partikel */
@keyframes fireworkParticle {
0% {
opacity: 1;
transform: translate(0, 0);
}
to {
transform: scale(0.5);
100% {
opacity: 0;
transform: translate(var(--x), var(--y));
}
}
/* movement of rockets */
@keyframes rise {
from {
transform: translate(0, 100vh);
}
to {
transform: translate(0, var(--y));
}
.firework {
position: absolute;
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
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 scrollFireworks = true; // enable fireworks to scroll with page content
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
// function to check and control fireworks
@@ -41,73 +52,97 @@ observer.observe(document.body, {
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() {
const fireworkContainer = document.querySelector('.fireworks');
if (!fireworkContainer) return;
// some colors for the fireworks
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
// Zufällige horizontale Position
//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
const x = Math.random() * window.innerWidth * 0.7 + window.innerWidth * 0.15;
const y = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.25;
// get random color for the whole firework
const fireworkColor = colors[Math.floor(Math.random() * colors.length)];
// create rocket element
const rocket = document.createElement('div');
rocket.classList.add('rocket');
rocket.style.left = `${x}px`;
rocket.style.bottom = `0px`;
rocket.style.setProperty('--color', fireworkColor);
rocket.style.setProperty('--y', `-${window.innerHeight - y}px`); // rocket animation from bottom to explosion position
fireworkContainer.appendChild(rocket);
// Schweif startet unten und endet auf einer zufälligen Höhe um die Mitte
let startY, endY;
if (scrollFireworks) {
// Y-Position berücksichtigt das Scrollen
startY = window.scrollY + window.innerHeight; // Unterkante des Fensters plus der Scroll-Offset
endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2 + window.scrollY; // Bereich um die Mitte, aber auch mit Scrollen
} else {
startY = window.innerHeight; // Unterkante des Fensters
endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Bereich um die Mitte
}
//console.log(startY, endY);
// Schweif erzeugen
createRocketTrail(x, startY, endY);
// Explosion erzeugen
setTimeout(() => {
rocket.remove();
// 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
createExplosion(x, endY); // Explosion an der Endhöhe
}, 1000); // or 1200
}
// automaticly start fireworks
// Startet die Feuerwerksroutine
function startFireworks() {
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++) {
launchFirework();
}
}, 1800) // firework every 600 mil second
}, 1800);
}
// initialize snowflakes and add random snowflakes after the DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
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>