Feuerwerk mit CSS3

CSS3

Mit CSS3 hat die Stylesheet Sprache viele neue Funktionalitäten erhalten. Dazu gehört auch die Möglichkeit Animationen zu erstellen. In diesem Artikel zeige ich, wie man mithilfe von CSS3 Animationen und Javascript ein Feuerwerk erstellt.

@keyframes

Um eine Animation mit CSS3 zu erstellen brauchen wir @keyframes. Keine Sorge, @keyframes benutzt eine sehr einfache Syntax. Zuerst wird ein Startzustand festgelegt, quasi der erste Frame der Animation. Danach werden weitere prozentuale Zustände X% festgelegt, auf welche dann vom Zustand zuvor "hingearbeitet" wird.

@keyframes beispielAnimation {
    0% { background: blue; }
    100% { background: red; }
}

Im ersten Frame ist das Element Blau und im letzten Frame Rot. Um einem DOM Element diese Animation zuzuweisen muss man folgendes tun:

div {
    animation-name: beispielAnimation;
    animation-duration: 3s;
}

Man legt die zu verwendende Animation über animation-name fest und bestimmt eine Animationsdauer. Nun wird jedes DIV Element nach 3 Sekunden die Hintergrundfarbe von blau zu rot wechseln.

Ein Live Beispiel gibt es hier: Simples Beispiel - JSFiddle

Rakete anzünden..

Mit dem Wissen können wir natürlich noch kein Feuerwerk erzeugen. Aber man sollte jetzt zumindest eine ungefähre Idee haben wie CSS3 Animationen funktionieren. Um ein Feuerwerk zu erstellen brauchen wir mehr als ein DOM Element. Fangen wir simpel an und erstellen erst mal eine CSS Partikel Klasse.

.particle {
    display: block;
    position: absolute;
    background: blue;
    border-radius: 20px;
    width: 8px;
    height: 8px;
    animation-name: start;
    animation-duration: 3s;
}

Jetzt brauchen wir noch einen Container in dem die Animationen später ablaufen.

<div id="box"></div>

Die erste Animation wird die hoch fliegende Rakete sein. Diese Animation, die oben schon gesetzt wurde und start heißen wird, realisieren wir wie folgt.

<style id="style">
@keyframes start {
    0% { opacity: 0; }
    100% { opacity: 1; transform: translate3d(0, -400px, 0); }
}
</style>

Es wird mit dieser Animation ein Element nach oben bewegt (-400px) und wird im letzten Frame die Deckkraft 1 haben. Das bedeutet, das Element ist erst mal unsichtbar, wird dann langsam über die Animationszeit hinweg sichtbarer und am Ende der Animation komplett undurchsichtig.

Das erste Hindernis...

Wer gerade angefangen hat sich vorzustellen, wie die Animation der explodierenden Rakete mit CSS3 realisiert aussieht, hat vielleicht ein Gedankenproblem festgestellt. Wie können die Partikel in alle Richtungen bewegt werden, ohne unzählige Animationen hardzucoden? Eine Lösung wären Zufallszahlen, aber diese können wir mit CSS nicht erzeugen. Es existiert die Möglichkeit die Keyframes mit Javascript nachträglich zu manipulieren, allerdings wäre das für unser kleines Feuerwerk unnötig komplex. Die einfachste Lösung lautet deshalb: Die Animationen mit Javascript dynamisch erstellen.

<script>
// 10 Grad, 20 Grad, 30 Grad, ...
for(var i = 0; i < 360/10; ++i)
{
var speed = 200;
var dx = Math.floor(Math.cos(i*10) * speed);
var dy = Math.floor(Math.sin(i*10) * speed);
document.getElementById("style").append("@keyframes fade"+i+" { 100% { opacity:  0; transform: translate3d("+dx+"px, "+dy+"px, 0); } }");
}
</script>

Der obige Code erstellt Animationen die fade0, fade1, fade2, ... heißen werden. Mithilfe von Kosinus und Sinus werden die Partikel in alle Himmelsrichtungen bewegt. Die Animationen werden dem style Element weiter oben mit der ID "style" hinzugefügt. Somit hätten wir den Großteil aller möglichen Richtungsanimationen abgedeckt. Man kann natürlich auch einfach alle 360 Animationen erstellen lassen und das /10 entfernen.

Ein Feuerwerk mit CSS3!

Wie mit den Animationen, will sicher auch keiner Partikel DIVs hardcoden. Deshalb brauchen wir wieder Javascript um das ganze dynamisch und einfach zu halten. Wir erstellen also zwei Funktionen: Einmal add, welche unseren Raketenschweif erstellt und addExplosion, welche sich um die Explosion der Rakete kümmert.

function add()
{
var pos = 0;
// DIV Element erstellen
var start = document.createElement("div");
// Klasse festlegen
start.className = "particle";
// Element zur Box hinzufügen
document.getElementById("box").appendChild(start);
// Position des DIVs ermitteln
pos = start.getBoundingClientRect();

// Raketen Explosion nach 2,5 Sekunden hinzufügen
// 2,5 Sekunden <=> Die Raketenstart Animation endet nach 3 Sekunden
setTimeout(function() { addExplosion(pos) }, 2500);
}

Wir erstellen hier ein Partikel DIV, fügen es der Box hinzu, ermitteln die Startposition des Partikels und übergeben diese an die Funktion addExplosion, welche über setTimeout nach 2,5 Sekunden aufgerufen werden soll. Erstmal soll nämlich die Rakete ihren Höhenflug beenden, bevor die Explosion kommt.

Vielleicht auch interessant
Google Adsense Werbung positionieren
Google Adsense Werbung positionieren

Wie man Werbung per Code einfacher und besser positioniert.

function addExplosion(pos)
{
// 100 Partikel hinzufügen!
for(var i = 0; i < 100; ++i)
{
var particle = document.createElement("div");
particle.className = "particle";

// Startposition festlegen
particle.style.left = pos.left;
// -400px => Raketenstart Animation endet 400 Pixel über Startposition
particle.style.top = pos.top - 400 + "px";

// Modulo um die Animationen nach der Reihenfolge durchzugehen
// 0-36
// i = 1 => 'fade1'
// i = 2 => 'fade2'
// ...
// i= 37=> 'fade1'
var dir = i % (360/10);

// Eine der dynamisch angelegten Animationen setzen
particle.style.animation = "fade" + dir + " 3s";
// Jedes Partikel kriegt eine Animationsverzögerung
// Ansonsten liegen die Partikel übereinander!
particle.style.animationDelay = Math.round(i/(360/10))*50 + "ms"; 
document.getElementById("box").appendChild(particle);
}
}

Es wird 100x ein Partikel DIV erstellt und der Box hinzugefügt. Die Partikel DIVs werden an die Endposition der Rakete gesetzt. Dann wird mithilfe eines Modulo jedes Partikel kreisförmig der Reihenfolge nach in eine Richtung geschickt. Das Delay sorgt dafür dass die Bewegung Wellenförmig abläuft.

Jetzt muss nur noch die add Funktion aufgerufen werden.

add();
// Alle 1,5 Sekunden aufrufen
setInterval(add, 1500);

Und schon wird alle 1,5 Sekunden eine CSS3 Rakete in die Lüfte gefeuert!

Aufräumen

Wenn man die Seite eine Weile offen lässt, hat man mehrere tausend DIVs welche den Tab, den Browser und das Endgerät enorm verlangsamen. Das kann man verhindern, indem man (am besten nach jeder Rakete) alle "toten" Partikel entfernt. Um das zu bewerkstelligen benötigen wir einen EventListener und das Event animationend.

function clear()
{
var particles = document.getElementsByClassName("particle");

for(var i = 0; i < particles.length; ++i)
{
particles[i].addEventListener("animationend", function() {
this.remove(); 
});
}
}

Diese Funktion rufen wir dann einfach innerhalb add als erstes auf.

Gimmick

Wer Lust hat, kann mit der Animationsverzögerung experimentieren und erhält dann andere interessante Formen.

firework[i].style.animationDelay = dir*10 + "ms";
// oder
firework[i].style.animationDelay = i*10 + "ms";
Hinterlasse gerne einen Like oder Kommentar (~‾▿‾)~
Name Text
Kommentare
pur> 10 Mt.hallo, danke fuer den post! ich will einige verschieden feuerwerke programmieren und das ist ein super startpunkt dafuer :) danke!