Herbstlicher Header

Herbstlicher Header

Um devindie etwas lebendiger zu gestalten, habe ich eine dezente Animation im Headerbereich realisiert. Passend zur Jahreszeit, hab ich mich dafür entschiedenen Blätter mit herbstlichen Farben fallen zu lassen. Das Ganze ist sehr schnell getan. Als erstes erstellt man ein IMG Element.

var elem = document.createElement("img");

Um es etwas interessanter zu machen, lasse ich per Zufall zwischen zwei verschiedenen Blättern entscheiden.

if(Math.floor(Math.random()*2) == 1) elem.src = "/images/icons/leaf_1.png";
else elem.src = "/images/icons/leaf_2.png";

Dann legt man die Klasse (die wir später definieren) und die Startposition fest.

elem.className = "fall";
elem.style.top = "0px";
elem.style.left = Math.random()*(document.body.clientWidth-16) + "px";

Das Blatt fängt oben an und wird zufällig im horizontalen Sichtbereich der Webseite positioniert. -16 ist die Breite eines Blattes und wird benötigt, damit das Blatt nicht so am Rand positioniert werden kann, dass man es nur halb sieht.

elem.style.animationDuration = (Math.floor(Math.random() * 6) + 5) + "s";

Ich hab mich dafür entschiedenen die Animationsdauer zufällig zu wählen. So sieht die gesamte Animation noch dynamischer aus.

document.getElementById("header").append(elem);

Jetzt wird noch setInterval verwendet um mehr als ein Blatt hinzuzufügen. Ich wähle hier ein Intervall bei dem nicht so viele Blätter gleichzeitig fallen können.

// Alle 3 Sekunden
setInterval(addLeaf, 3000);

Die "fallendes Blatt" CSS3 Animation

Die oben schon verwendete Klasse fall sieht wie folgt aus.

.fall {
    position: absolute;
    animation-name: falling;
    width: 16px;
}

Und die dazugehörige Animaton sieht wiederum so aus:

@keyframes falling {
    0% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(0, 100px, 0) rotate(200deg); }
}

Schon fast zu einfach, oder?

Im ersten Frame ist das Blatt komplett sichtbar. Im letzten Frame hat es seine Farbe verloren. Im Verlauf vom ersten zum letzten Frame soll außerdem das Blatt 100px in der Y Achse nach unten bewegt werden (100px = die Header Höhe bei devindie) und sich dabei um 200 Grad drehen.

Hinterlasse gerne einen Like oder Kommentar (~‾▿‾)~
Name Text