Resource icon

Star Wars Intro nur mit CSS3 und HTML5

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).

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.

Autor
Webcp
Aufrufe
3.199
First release
Last update
Bewertung
5,00 Stern(e) 2 Bewertungen

More resources from Webcp

Neueste Bewertungen

Das ist wirklich eine coole Sache! Hat bei mir super funktioniert!
Krasser Effekt! Und das mit soo einfachen Mitteln!
Zurück