CSS Animationen

Animationen nur mit CSS3 und Html5

Nach vielen Anfragen habe ich hier ein kleines Tutorial zusammengeschrieben wie man nur mit CSS das Star Wars Intro ohne Javascript erstellt.

CSS3 Tutorial

Star Wars Intro nur mit CSS3 und Html5. Kein Javascript.

So soll unser fertiges Intro aussehen:

Es funktioniert übrigens mit allen gängigen Browsern wie Chrome, Safari, Firefox und dem Internet Explorer.

HTML5

Als erstes erstellen wir ein Html Dokument mit einem äußeren Element (#starwars) und einer Section (#starwarscontent).

<div id="starwars"><div id="starwarscontent">

	<p>content</p>

</div></div>

Der Content wird im Anschluss durch einen beliebigen Text, in unserem Fall durch einen Platzhalter Text ersetzt.

CSS

Nun brauchen wir das dazugehörige CSS:

Das äußere Element DIV ist im Browser Fenster unten, mittig positioniert und wird dann mit dem Befehl transform 3 dimensional angezeigt.

#starwars
{
	position: absolute;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	font-weight: bold;
	text-align: justify;
	overflow: hidden;
	transform-origin: 50% 100%;
	transform: perspective(300px) rotateX(25deg);
}

Es wird noch ein Pseudo Element über den äußeren DIV gelegt für den fade-out Gradient.

#starwars:after
{
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
}

Zum Schluss benötigen wir noch die CSS Animation um den Text 3 dimensional laufen zu lassen.

#starwarscontent
{
	position: absolute;
	top: 100%;
	animation: scroll 100s linear 4s infinite;
}

@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

Den Content im Html Dokument ersetzt ihr einfach durch einen beliebigen Text. Das wars auch schon. Fertig ist das Star Wars Intro ohne Javascript, nur mit CSS und Html.

Hier nochmal unser Ergebnis.

Wenn ihr noch Fragen, habt einfach melden.