Der Anfang von Star Wars ist ikonisch. Der Effekt von Text, der sich sowohl nach oben als auch vom Bildschirm weg scrollt, war 1977 ein verrückter Spezialeffekt für einen Film und ein cooler typografischer Stil, der damals völlig neu war.
Wir können einen ähnlichen Effekt mit HTML und CSS erzielen! Dieser Beitrag beschäftigt sich eher damit, wie man diesen gleitenden Texteffekt erzielt, als damit, die gesamte Star Wars-Eröffnungssequenz nachzubilden oder die genauen Stile des Films zu kopieren. Lassen Sie uns also zu einem Punkt gelangen, an dem dies das Endergebnis ist.
Siehe den Pen Star Wars Intro von Geoff Graham (@geoffgraham) auf CodePen.
Das Basis-HTML
Zuerst richten wir unser HTML für den Inhalt ein.
<section class="star-wars">
<div class="crawl">
<div class="title">
<p>Episode IV</p>
<h1>A New Hope</h1>
</div>
<p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>
<p>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.</p>
<p>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…</p>
</div>
</section>Dies gibt uns alle Teile, die wir brauchen.
- Ein Container namens
star-wars, den wir zur Positionierung des Inhalts verwenden werden. Dies ist auch notwendig, da wir die CSS-Eigenschaftperspectiveverwenden werden, wobei ein Elternelement eine hilfreiche Möglichkeit ist, dietransform-Eigenschaft eines Kindelements Tiefe zu verleihen oder zu verzerren. - Ein Container namens
crawl, der den eigentlichen Text enthält und das Element ist, auf das wir die CSS-Animation anwenden werden. - Der Inhalt!
Sie haben vielleicht bemerkt, dass der Filmtitel in einem zusätzlichen <div>-Container namens title eingeschlossen ist. Dies ist nicht notwendig, kann Ihnen aber zusätzliche Styling-Optionen bieten, falls Sie diese benötigen.
Das Basis-CSS
Der Trick besteht darin, sich einen dreidimensionalen Raum vorzustellen, in dem der Text vertikal entlang der Y-Achse und entlang der Z-Achse kriecht. Dies erweckt den Eindruck, dass der Text gleichzeitig den Bildschirm nach oben gleitet und sich vom Betrachter wegbewegt.
Zuerst richten wir den <body> des Dokuments so ein, dass der Bildschirm nicht scrollbar ist. Wir möchten, dass der Text vom unteren Bildschirmrand aufsteigt, ohne dass der Betrachter scrollen und den Text sehen kann, bevor er erscheint. Wir können dafür overflow: hidden verwenden.
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-wars-Containers fortfahren, der das Elternelement für unsere 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 dem crawl-Element Stile zuweisen. Dieses Element ist wieder wichtig, da es die Eigenschaften enthält, die den Text transformieren und animiert werden.
.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 ansprechenden Textblock, aber er ist weder verzerrt noch animiert. Machen wir das möglich.
Animation!
Das ist es, worum es Ihnen wirklich geht, oder? Zuerst definieren wir die @keyframes für die Animation. Die Animation macht etwas mehr als uns nur die Bewegung zu liefern, denn wir werden hier unsere transform-Eigenschaften hinzufügen, insbesondere für die Bewegung entlang der Z-Achse. Wir beginnen die Animation bei 0%, wo der Text dem Betrachter am nächsten ist und sich unterhalb des Bildschirms befindet, außerhalb des Sichtfelds, und beenden die Animation bei 100%, wo er weit vom Betrachter entfernt ist und über den oberen Bildschirmrand hinaus 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);
}
}Nun wenden wir diese Animation auf das Element .crawl 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ß mit Feinabstimmung
Nachdem der Haupteffekt etabliert ist, können Sie noch ein bisschen mehr Spaß mit den Dingen haben. Wir können zum Beispiel am oberen Bildschirmrand einen leichten Verblassungseffekt hinzufügen, um den Eindruck des sich in die Ferne entfernenden Textes zu verstärken.
.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 am Anfang des HTML ein, und der Text fließt hinter einem Gradienten, der von transparent zu derselben Hintergrundfarbe wie der <body> übergeht.
<div class="fade"></div>Das vollständige Beispiel
Hier ist der gesamte Code aus diesem Beitrag zusammengefasst.
<div class="fade"></div>
<section class="star-wars">
<div class="crawl">
<div class="title">
<p>Episode IV</p>
<h1>A New Hope</h1>
</div>
<p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>
<p>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.</p>
<p>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…</p>
</div>
</section>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);
}
}Weitere Beispiele
Einige andere Leute haben treuere Nachbildungen der Star Wars-Eröffnungssequenz erstellt, indem sie andere Techniken als die hier in diesem Beitrag behandelten verwendet haben.
Tim Pietrusky hat eine wunderschön orchestrierte Version mit top für die Bewegung und opacity für den Verblassungseffekt.
Siehe den Pen Star Wars opening crawl from 1977 von Tim Pietrusky (@TimPietrusky) auf CodePen.
Yukulélé verwendet margin, um den Text über den Bildschirm zu bewegen.
Siehe den Pen Pure CSS Star Wars opening crawl von Yukulélé (@yukulele) auf CodePen.
Karottes verwendet transform, ähnlich wie in diesem Beitrag, verlässt sich aber mehr auf TranslateY, um den Text entlang der Y-Achse zu bewegen.
Siehe den Pen Star Wars Crawl von Karottes (@Karottes) auf CodePen.
Das ist großartig. Ich benutze das für ein Schulprojekt und es ist wunderschön geworden. Vielen Dank, Sir, dafür. Natürlich habe ich den Wortlaut geändert, um mein Projekt widerzuspiegeln, aber es ist so gut geworden, man hätte denken können, ich hätte an Star Wars gearbeitet.
Nochmal danke, deshalb liebe ich Webentwicklung.
Gibt es eine Möglichkeit, dies so zu gestalten, dass die Scroll-Position des Elements anstelle einer Animation verwendet wird?
Wie könnte man Sound während des Scrollens einbinden und vielleicht sogar einen Hintergrund, der nach Abschluss des Scrollens angezeigt wird?
Hallo da – das ist fantastisch!
Ich habe keine Ahnung von CSS usw., daher ist eine solche Hilfe ein Geschenk des Himmels!!
Nur eine Sache ist nötig – ich versuche, mit Sugarcube in Twein eine Passage mit dem Crawl zu erstellen und danach zu einer nächsten Passage zu springen, sobald sie fertig ist. Ist das möglich?