Parallax-Hintergrund aus Sternen (plus CSS3 Keyframe-Animation)

Es gibt eine gewisse Debatte, ob diese ausgefallenen Übergänge und Animationen, die CSS3 uns bietet, in CSS gehören. Man könnte argumentieren, dass sich bewegende Dinge "Verhalten" und nicht "Design" sind und daher zu JavaScript gehören. Ich widerspreche dieser Ansicht, und dass Animationen definitiv "Design" sind, und wenn wir diese Dinge in CSS halten können, sollten wir es tun. Daher aktualisiere ich diese Idee (siehe Links oben), um CSS3 Keyframe-Animationen zu verwenden.

Demo anzeigen   Dateien herunterladen

Keyframe-Animation deklarieren

So deklariert man eine Keyframe-Animation. Wir nennen unsere "STAR-MOVE".

@-webkit-keyframes STAR-MOVE {
	from {
		left: 0;
		top: 0;
	}
	to { 
		left: -10000px;
		top: -2000px;
	}
}

@-webkit-keyframes STAR-MOVE {
	from {
		background-position: 5% 5%
	}
	to { 
		background-position: 1300% 600%
	}
}

Man ist nicht auf "from" und "to" beschränkt. Man kann mehr davon einfügen, basierend auf Prozentsätzen. Wie zum Beispiel:40% { }was animiert wird, wenn die Animation zu 40 % abgeschlossen ist.

Unsere Animation ist sehr einfach, wir animieren die Position des Hintergrundbilds und ziehen die Elemente im Grunde nach oben links. Nicht jede Eigenschaft kann animiert werden, aber im Allgemeinen kann alles mit einem numerischen Wert (einschließlich Farben) animiert werden. Aber man kann zum Beispiel keine Schriftart von Helvetica auf Georgia animieren.

Diese Eigenschaften überschreiben alle vorherigen Einstellungen für die angegebenen Eigenschaften. Da zum Beispiel IE diese nicht unterstützt, möchten Sie vielleicht die Eigenschaften mit normalem CSS so einstellen, dass sie sinnvoll sind, wenn keine Animation vorhanden ist. Wissen Sie dann, dass diese Eigenschaften mit den From/0%-Eigenschaften der Animation überschrieben werden.

Keyframe-Animation verwenden

Wir haben drei "Ebenen" von Sternen, die jeweils den gesamten Bildschirm mit einer sich wiederholenden, alpha-transparenten Schicht aus grafischen Sternenhintergründen bedecken. Wir können dieselbe Animation auf alle drei divs anwenden, nur mit unterschiedlichen Dauern.

#background {
	background: black url(../images/background.png) repeat 5% 5%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 100;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 200s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#midground {
	background: url(../images/midground.png) repeat 20% 20%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 200;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 150s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#foreground {
	background: url(../images/foreground.png) repeat 35% 35%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 300;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 100s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

Die größeren Sterne bewegen sich schneller (sie sind "näher" in der Illusion und sollten daher schneller vorbeiziehen). Sie scheinen sich schneller zu bewegen, weil die Dauer der Animation kürzer ist und sie daher eine größere Entfernung in kürzerer Zeit zurücklegen müssen.

Animationen verwenden "Easing"-Funktionen. Das heißt, eine mathematische Formel wird angewendet, um zu steuern, wie schnell die Animation "an Geschwindigkeit gewinnt" und wieder abnimmt. Ohne Easing könnten Animationen ruckartig und unbeholfen aussehen. Der Standard in Webkit ist "ease", der eine Animation langsam beschleunigt und dann langsam wieder abbremst. In diesem speziellen Beispiel war das nicht sinnvoll, denn am Ende der 100er-Jahre, die die größten Sterne nutzen, ist die Animationsgeschwindigkeit so langsam, dass die Sterne dahinter schneller vorbeiziehen (seltsam). Beachten Sie also im obigen Code, dass wir das Easing auf "linear" zurückgesetzt haben. Eine vollständige Liste finden Sie hier.

Browser-Unterstützung

Derzeit nur WebKit-Browser (Safari, Mobile Safari, Chrome). Ich weiß, dass Firefox 3.7 Unterstützung für Übergänge haben wird, aber ich bin mir nicht sicher, ob er ein eigenes Präfix für Keyframe-Animationen haben wird oder nicht. Wenn Sie es wissen, lassen Sie es mich wissen.