1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Star Wars Intro nur mit CSS3 und HTML5

Ein kleines Tutorial wie man nur mit CSS das Star Wars Intro ohne Javascript erstellt

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

    Code (HTML5):
    1. <div id="starwars"><div id="starwarscontent">
    2.  
    3.     <p>content</p>
    4.  
    5. </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.

    Code (HTML5):
    1. #starwars
    2. {
    3.     position: absolute;
    4.     width: 18em;
    5.     height: 50em;
    6.     bottom: 0;
    7.     left: 50%;
    8.     margin-left: -9em;
    9.     font-size: 350%;
    10.     font-weight: bold;
    11.     text-align: justify;
    12.     overflow: hidden;
    13.     transform-origin: 50% 100%;
    14.     transform: perspective(300px) rotateX(25deg);
    15. }
    Es wird noch ein Pseudo Element über den äußeren DIV gelegt für den fade-out Gradient.

    Code (HTML5):
    1. #starwars:after
    2. {
    3.     position: absolute;
    4.     content: ' ';
    5.     left: 0;
    6.     right: 0;
    7.     top: 0;
    8.     bottom: 60%;
    9.     background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
    10.     pointer-events: none;
    11. }
    Zum Schluss benötigen wir noch die CSS Animation um den Text 3 dimensional laufen zu lassen.

    Code (HTML5):
    1. #starwarscontent
    2. {
    3.     position: absolute;
    4.     top: 100%;
    5.     animation: scroll 100s linear 4s infinite;
    6. }
    7.  
    8. @keyframes scroll {
    9.     0% { top: 100%; }
    10.     100% { top: -170%; }
    11. }
    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.

Letzte Rezensionen

  1. pschilling
    pschilling
    5/5,
    Krasser Effekt! Und das mit soo einfachen Mitteln!