Die Eröffnung von Star Wars ist eine Ikone. Der Effekt des Bildlaufs von Text nach oben und vom Bildschirm weg war sowohl ein verrückter cooler Spezialeffekt für einen Film im Jahr 1977 als auch ein cooler typografischer Stil, der zu dieser Zeit brandneu war.
Mit HTML und CSS können wir einen ähnlichen Effekt erzielen! In diesem Beitrag geht es mehr darum, wie Sie diesen gleitenden Texteffekt erzielen, als zu versuchen, die vollständige Star Wars-Eröffnungssequenz neu zu erstellen oder die genauen Stile des Films abzugleichen. Kommen wir also zu einem Ort, an dem dies das Endergebnis ist:
Sehen Sie sich das Pen Star Wars-Intro von Geoff Graham (@geoffgraham) auf CodePen an.
Das grundlegende HTML
Lassen Sie uns zunächst HTML für den Inhalt einrichten:
Episode IV
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…
Dies gibt uns alle Teile, die wir brauchen:
- Ein Container namens
star-wars, mit dem wir den Inhalt positionieren. Dies ist auch erforderlich, da wir dieperspectiveCSS-Eigenschaft verwenden, bei der ein übergeordnetes Element hilfreich ist, um die Eigenschaft eines untergeordneten Elements zu vertiefen oder zu verzerrentransform. - Ein Container namens
crawl, der den eigentlichen Text enthält und das Element ist, auf das wir die CSS-Animation anwenden. - Der Inhalt!
Möglicherweise haben Sie bemerkt, dass der Filmtitel in einem zusätzlichen Container namens aufgerufen ist title. Dies ist nicht erforderlich, kann Ihnen jedoch zusätzliche Styling-Optionen bieten, falls Sie diese benötigen.
Das grundlegende CSS
Der Trick besteht darin, sich einen dreidimensionalen Raum vorzustellen, in dem der Text vertikal nach oben Y-axisund außen entlang kriecht Z-axis. Dies erweckt den Eindruck, dass der Text gleichzeitig auf dem Bildschirm nach oben und vom Betrachter weg verschoben wird.
Lassen Sie uns zunächst das Dokument so einrichten, dass der Bildschirm nicht scrollbar ist. Wir möchten, dass der Text am unteren Bildschirmrand angezeigt wird, ohne dass der Betrachter einen Bildlauf durchführen und den Text sehen kann, bevor er eingegeben wird. Wir können das verwenden overflow: hidden, um:
body ( /* Force the body to fill the entire screen */ width: 100%; height: 100%; /* Hide elements that flow outside the viewable space */ overflow: hidden; /* Black background for the screen */ background: #000; )Jetzt können wir mit dem Styling unseres star-warsContainers fortfahren , der das übergeordnete Element unserer Demo ist:
.star-wars ( /* Flexbox to center the entire element on the screen */ display: flex; justify-content: center; /* This is a magic number based on the context in which this snippet is used and effects the perspective */ height: 800px; /* This sets allows us to transform the text on a 3D plane, and is somewhat a magic number */ perspective: 400px; /* The rest is totally up to personal styling preferences */ color: #feda4a; font-family: 'Pathway Gothic One', sans-serif; font-size: 500%; font-weight: 600; letter-spacing: 6px; line-height: 150%; text-align: justify; )Als nächstes können wir Stile auf das crawlElement anwenden . Auch dieses Element ist wichtig, da es die Eigenschaften enthält, die den Text transformieren und animieren.
.crawl ( /* Position the element so we can adjust the top property in the animation */ position: relative; /* Making sure the text is fully off the screen at the start and end of the animation */ top: -100px; /* Defines the skew origin at the very center when we apply transforms on the animation */ transform-origin: 50% 100%; )Bisher haben wir einen gut aussehenden Text, der jedoch weder verzerrt noch animiert ist. Lassen Sie uns das geschehen.
Animation!
Das ist es, was dich wirklich interessiert, oder? Zuerst definieren wir die @keyframesfür die Animation. Die Animation ist etwas mehr als nur eine Animation für uns, da wir transformhier unsere Eigenschaften hinzufügen werden, insbesondere für die Bewegung entlang der Z-axis. Wir beginnen die Animation an der Stelle, 0%an der der Text dem Betrachter am nächsten liegt und sich außerhalb des Bildschirms befindet, und beenden die Animation an der Stelle, 100%an der er weit vom Betrachter entfernt ist und über den oberen Bildschirmrand fließt.
/* We're calling this animation "crawl" */ @keyframes crawl ( 0% ( /* The element starts below the screen */ top: 0; /* Rotate the text 20 degrees but keep it close to the viewer */ transform: rotateX(20deg) translateZ(0); ) 100% ( /* This is a magic number, but using a big one to make sure the text is fully off the screen at the end */ top: -6000px; /* Slightly increasing the rotation at the end and moving the text far away from the viewer */ transform: rotateX(25deg) translateZ(-2500px); ) )Wenden wir nun diese Animation auf das .crawlElement an:
.crawl ( /* Position the element so we can adjust the top property in the animation */ position: relative; /* Defines the skew origin at the very center when we apply transforms on the animation */ transform-origin: 50% 100%; /* Adds the crawl animation, which plays for one minute */ animation: crawl 60s linear; )Spaßzeiten mit Feinabstimmung
Sie können ein bisschen mehr Spaß mit Dingen haben, sobald der Haupteffekt vorhanden ist. Zum Beispiel können wir am oberen Bildschirmrand eine kleine Überblendung hinzufügen, um den Effekt des in die Ferne kriechenden Textes hervorzuheben:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Fügen Sie dieses Element oben im HTML-Code hinzu, und der Text fließt hinter einem Farbverlauf von transparent zu demselben Hintergrund wie :
Das vollständige Beispiel
Hier ist der vollständige Code aus diesem Beitrag zusammengefasst.
Episode IV
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…
body ( width: 100%; height: 100%; background: #000; overflow: hidden; ) .fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; ) .star-wars ( display: flex; justify-content: center; position: relative; height: 800px; color: #feda4a; font-family: 'Pathway Gothic One', sans-serif; font-size: 500%; font-weight: 600; letter-spacing: 6px; line-height: 150%; perspective: 400px; text-align: justify; ) .crawl ( position: relative; top: 9999px; transform-origin: 50% 100%; animation: crawl 60s linear; ) .crawl > .title ( font-size: 90%; text-align: center; ) .crawl > .title h1 ( margin: 0 0 100px; text-transform: uppercase; ) @keyframes crawl ( 0% ( top: 0; transform: rotateX(20deg) translateZ(0); ) 100% ( top: -6000px; transform: rotateX(25deg) translateZ(-2500px); ) )Andere Beispiele
Einige andere Leute haben die Star Wars-Eröffnung mit anderen Techniken als den hier in diesem Beitrag behandelten originalgetreuer wiedergegeben.
Tim Pietrusky hat eine wunderschön orchestrierte Version, die topfür die Bewegung und opacityden Fading-Effekt verwendet wird:
Sehen Sie den Pen Craw Wars-Eröffnungscrawl von 1977 von Tim Pietrusky (@TimPietrusky) auf CodePen.
Yukulélé verwendet margin, um das entlang des Bildschirms zu bewegen:
Sehen Sie sich den Eröffnungs-Crawl von Pen Pure CSS Star Wars von Yukulélé (@yukulele) auf CodePen an.
Karottes verwendet transformähnlich wie dieser Beitrag, verlässt sich jedoch mehr darauf TranslateY, den Text entlang des zu verschieben Y-axis.
Sehen Sie sich den Pen Star Wars Crawl von Karottes (@Karottes) auf CodePen an.