Mit einem animierten Feuerwerk bringst du Stimmung und Bewegung auf Deine Webseite, ganz besonders passend rund um Silvester, Neujahr oder andere besondere Anlässe wie Geburtstage, Events oder Jubiläen. Ein dynamisches Feuerwerk kann deine Besucher fesseln und deine Seite visuell aufwerten.
Hier ein Beispiel-Feuerwerk (erstellt mit ChatGPT):
So kannst du ein Feuerwerk auf Deiner Website einbinden
Ein solches Feuerwerk realisierst du am einfachsten mit JavaScript- bzw. HTML5-Effekten, die direkt im Browser laufen, ohne dass deine Besucher zusätzliche Plugins benötigen.
Beispiele und Quellen für Feuerwerk-Scripte
Hier findest du einige empfehlenswerte Ressourcen, die Du nutzen kannst:
| Link | Beschreibung |
|---|---|
| http://creativejs.com/tutorials/creating-fireworks/ | Feuerwerk mit HTML 5 Canvas |
| https://www.go4u.de/fireworks.htm | Javascript-Feuerwerk für deine Homepage, benötigt nur eine einzelne Javascriptdatei und keine weiteren Bilder oder CSS-Dateien. |
| https://www.javascript-fx.com/submitscripts/fireworks/ | Sammlung von Feuerwerk-Javascripts |
| https://jsfiddle.net/dtrooper/AceJJ/ | Beeindruckend schönes Javascript-Feuerwerk |
| https://github.com/kennethkufluk/js-fireworks | Sehr schönes Feuerwerk – es wird am Nachthimmel durch die Raketen ein individueller Text dargestellt. |
| http://www.lsd-pyrotechnik.de/feuerwerk_online.php | Individuelles Feuerwerk-Script mit verschiedenen Effekten und individuellen Texten |
| http://www.schillmania.com/projects/fireworks/ | Fireworks-Javascript mit sehr vielen Einstellungsmöglichkeiten sowie zufälliger Animationswiedergabe |
Du kannst diese Scripts direkt in deine HTML-Seite einbinden. Achte dabei auf eine geeignete Platzierung des Codes, z. B. am Ende des <body>-Bereichs, damit die Animation nach dem Laden der Seite startet.
Tipps zur Gestaltung
Damit Deine Feuerwerk-Animation gut wirkt und Deine Besucher nicht stört:
- Nicht überladen: Zu viele Effekte können die Lesbarkeit Deiner Seite beeinträchtigen.
- Kontext wählen: Setze das Feuerwerk nur zu passenden Anlässen ein, z. B. zu Silvester, Geburtstagen oder besonderen Aktionen.
- Performance testen: Achte darauf, dass die Animation nicht zu viele Ressourcen beansprucht, insbesondere auf mobilen Geräten.
Weiterführende Ideen
- Kombiniere das Feuerwerk mit einem Countdown bis zum Jahreswechsel oder Event.
- Füge farbige Grafiken oder dynamische Texte ein, die Dein Feuerwerk visuell ergänzen.
- Nutze CSS-Animationen oder Canvas-Effekte, um moderne, flüssige Bewegungen zu erzeugen.
Unser Beispiel-Feuerwerk haben wir mit ChatGPT erstellt – hier der Code (Nutzung auf eigenes Risiko, ohne Gewähr):
Notwendiges Javascript:
<script>
/*
Fireworks-in-a-Div (Auto Start, Full Width) — MIT License
Copyright (c) 2025
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.
*/
(() => {
"use strict";
class FireworksInDiv {
constructor(container, opts = {}) {
if (!container) throw new Error("Container element is required.");
this.container = container;
this.opts = {
backgroundFade: 0.18,
gravity: 0.09,
rocketSpeed: 7.0,
rocketSpread: 0.4,
burstCount: [70, 130],
particleLife: [55, 95],
particleDrag: 0.985,
sparkleRate: 0.2,
maxRockets: 8,
maxParticles: 6000,
launchInterval: 700, // ms – automatische Startfrequenz
...opts
};
this.dpr = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
this.canvas = document.createElement("canvas");
this.canvas.style.width = "100%";
this.canvas.style.height = "100%";
this.canvas.style.display = "block";
this.canvas.style.pointerEvents = "none";
const cs = getComputedStyle(this.container);
if (cs.position === "static") this.container.style.position = "relative";
this.container.appendChild(this.canvas);
this.ctx = this.canvas.getContext("2d", { alpha: true });
this.rockets = [];
this.particles = [];
this.running = false;
this._resizeObserver = new ResizeObserver(() => this.resize());
this._resizeObserver.observe(this.container);
this.resize();
this.start();
this._autoLaunch();
}
resize() {
const r = this.container.getBoundingClientRect();
this.width = Math.max(1, r.width);
this.height = Math.max(1, r.height);
this.canvas.width = Math.floor(this.width * this.dpr);
this.canvas.height = Math.floor(this.height * this.dpr);
this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
}
rand(min, max) {
return min + Math.random() * (max - min);
}
hsl(h, s, l, a = 1) {
return `hsla(${h}, ${s}%, ${l}%, ${a})`;
}
launch() {
if (this.rockets.length >= this.opts.maxRockets) return;
const x = this.rand(0, this.width);
const y = this.height;
const targetY = this.height * this.rand(0.2, 0.55);
this.rockets.push({
x,
y,
vx: this.rand(-this.opts.rocketSpread, this.opts.rocketSpread),
vy: -this.opts.rocketSpeed * this.rand(0.9, 1.15),
targetY,
hue: Math.floor(this.rand(0, 360)),
alive: true
});
}
burst(x, y, hue) {
const count = Math.floor(this.rand(...this.opts.burstCount));
for (let i = 0; i < count; i++) {
const a = this.rand(0, Math.PI * 2);
const s = this.rand(1.4, 5.8);
this.particles.push({
x,
y,
vx: Math.cos(a) * s,
vy: Math.sin(a) * s,
hue: (hue + this.rand(-25, 25) + 360) % 360,
life: this.rand(...this.opts.particleLife),
age: 0,
alpha: 1,
size: this.rand(1, 2.4)
});
}
if (this.particles.length > this.opts.maxParticles) {
this.particles.splice(0, this.particles.length - this.opts.maxParticles);
}
}
start() {
if (this.running) return;
this.running = true;
const loop = () => {
if (!this.running) return;
requestAnimationFrame(loop);
this.update();
this.draw();
};
loop();
}
_autoLaunch() {
this._launchTimer = setInterval(() => {
this.launch();
}, this.opts.launchInterval);
}
update() {
for (const r of this.rockets) {
r.x += r.vx;
r.y += r.vy;
r.vy *= 0.995;
if (r.y <= r.targetY) {
r.alive = false;
this.burst(r.x, r.y, r.hue);
}
}
this.rockets = this.rockets.filter(r => r.alive);
for (const p of this.particles) {
p.age++;
p.vx *= this.opts.particleDrag;
p.vy = p.vy * this.opts.particleDrag + this.opts.gravity;
p.x += p.vx;
p.y += p.vy;
p.alpha = Math.max(0, 1 - (p.age / p.life) ** 2);
}
this.particles = this.particles.filter(p => p.age < p.life);
}
draw() {
const ctx = this.ctx;
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = `rgba(0,0,0,${this.opts.backgroundFade})`;
ctx.fillRect(0, 0, this.width, this.height);
ctx.globalCompositeOperation = "lighter";
for (const r of this.rockets) {
ctx.fillStyle = this.hsl(r.hue, 100, 65, 0.9);
ctx.beginPath();
ctx.arc(r.x, r.y, 2, 0, Math.PI * 2);
ctx.fill();
}
for (const p of this.particles) {
ctx.fillStyle = this.hsl(p.hue, 90, 60, p.alpha);
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fill();
}
}
}
// ===== Initialisierung =====
const container = document.getElementById("fireworksBox");
if (!container) return;
container.style.background ||= "#000";
new FireworksInDiv(container);
})();
</script>Notwendiges HTML:
<div id="fireworksBox"></div>Notwendiges CSS:
#fireworksBox {
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
border-radius: 12px;
}Optional im Javascript anpassbare Stellschrauben (im Konstruktor):
new FireworksInDiv(container, {
launchInterval: 500, // schneller
maxRockets: 12, // mehr gleichzeitige Raketen
backgroundFade: 0.12 // längere Leuchtspuren
});