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
});Weiterführende Links
Du möchtest Deine Homepage zu Silvester und Neujahr noch weiter gestalten? Dann findest Du auf meine-erste-homepage.com weitere passende Anleitungen, kostenlose Grafiken und praktische Webmaster-Tools:
Kostenlose Silvesterbilder & Neujahrsgrafiken für Deine Webseite
Ergänze Dein animiertes Feuerwerk mit passenden Silvesterbildern, Neujahrsgrafiken oder animierten GIFs. Wir stellen verschiedene kostenlose Bildquellen vor und erklären, wie Du die Inhalte in HTML und WordPress einbindest.
Zum Beitrag:
https://meine-erste-homepage.com/kostenlose-silvester-und-neujahrsgrafiken-fuer-deine-webseite/
Countdown zum neuen Jahr für Deine Homepage
Wie viele Tage, Stunden, Minuten und Sekunden sind es noch bis zum Jahreswechsel? Mit einem Silvester-Countdown kannst Du die verbleibende Zeit direkt auf Deiner Homepage anzeigen. Wir zeigen Dir verschiedene Lösungen und Möglichkeiten zur Einbindung.
Zum Beitrag:
https://meine-erste-homepage.com/countdown-zum-neuen-jahr-flexible-countdowns-fuer-deine-webseite/
Kalender für die eigene Homepage
Du möchtest neben dem Jahreswechsel auch Termine, Veranstaltungen oder andere wichtige Daten auf Deiner Webseite anzeigen? In unserer Kalender-Übersicht findest Du verschiedene Lösungen und Anbieter für die eigene Homepage.
Zum Beitrag:
https://meine-erste-homepage.com/kalender-fuer-die-eigene-homepage-funktionen-beispiele-anbieter/
Grafiken & Fotos in Deine Homepage einbinden
Du möchtest Dein Feuerwerk mit einem Hintergrundbild oder anderen Grafiken kombinieren? In unserem Grafik-Workshop erfährst Du, wie Du Bilder richtig in HTML und WordPress einbindest und dabei Bildformate, Dateigröße, Alt-Texte und responsive Darstellung berücksichtigst.