Star Wars Intro nur mit CSS3 und Html5. Kein Javascript.
Das fertige Tutorial findet ihr unter:
https://www.webcp.at/css-animationen/
Es funktioniert übrigens mit allen gängigen Browsern wie Chrome, Safari, Firefox und dem Internet Explorer.
Also los geht's:
HTML5
Als erstes erstellen wir ein Html Dokument mit einem äußeren Element (#starwars) und einer Section (#starwarscontent).
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 Befehltransform 3 dimensional angezeigt.
Es wird noch ein Pseudo Element über den äußeren DIV gelegt für den fade-out Gradient.
Zum Schluss benötigen wir noch die CSS Animation um den Text 3 dimensional laufen zu lassen.
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.
Das fertige Tutorial findet ihr unter:
https://www.webcp.at/css-animationen/
Es funktioniert übrigens mit allen gängigen Browsern wie Chrome, Safari, Firefox und dem Internet Explorer.
Also los geht's:
HTML5
Als erstes erstellen wir ein Html Dokument mit einem äußeren Element (#starwars) und einer Section (#starwarscontent).
HTML:
<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 Befehltransform 3 dimensional angezeigt.
HTML:
#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.
HTML:
#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.
HTML:
#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.
