Öppningen till Star Wars är ikonisk. Effekten av att textrulla både upp och bort från skärmen var både en galen cool specialeffekt för en film 1977 och en cool typografisk stil som var helt ny då.
Vi kan uppnå en liknande effekt med HTML och CSS! Det här inlägget handlar mer om hur man får den glidande texteffekten snarare än att försöka återskapa hela Star Wars-öppningssekvensen eller matcha exakta stilar som används i filmen, så låt oss komma till en plats där detta är det slutliga resultatet:
Se Pen Star Wars Intro av Geoff Graham (@geoffgraham) på CodePen.
Grundläggande HTML
Låt oss först ställa in HTML för innehållet:
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…
Detta ger oss alla delar vi behöver:
- En container
star-warssom vi använder för att placera innehållet. Detta är också nödvändigt eftersom vi kommer att användaperspectiveCSS-egenskapen, där att ha ett överordnat element är ett användbart sätt att lägga till djup eller förvränga ett barns elementstransformegendom. - En behållare som heter
crawlsom kommer att innehålla den faktiska texten och vara det element som vi använder CSS-animationen på. - Innehållet!
Du kanske har märkt att filmtiteln är förpackad i en extra behållare som heter title. Detta är inte nödvändigt, men kan ge dig ytterligare stylingalternativ om du behöver dem.
Grundläggande CSS
Tricket är att föreställa sig ett tredimensionellt utrymme där texten kryper vertikalt upp Y-axisoch ut längs Z-axis. Detta ger intrycket att texten både glider uppåt på skärmen och bort från tittaren samtidigt.
Låt oss först ställa in dokumentet så att skärmen inte kan rullas. Vi vill att texten ska komma upp från skärmens botten utan att tittaren kan bläddra och se texten innan den går in. Vi kan använda för overflow: hiddenatt göra det:
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; )Nu kan vi gå vidare till att utforma vår star-warscontainer, som är det överordnade elementet för vår demo:
.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; )Därefter kan vi använda stilar på crawlelementet. Återigen är detta element viktigt eftersom det innehåller de egenskaper som kommer att förvandla texten och animeras.
.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%; )Hittills har vi ett snyggt gäng text, men det är varken snett eller animerat. Låt oss få det att hända.
Animation!
Det här är vad du verkligen bryr dig om, eller hur? Först ska vi definiera @keyframesför animationen. Animationen gör lite mer än att animera för oss, för vi kommer att lägga till våra transformegenskaper här, särskilt för rörelsen längs Z-axis. Vi startar animeringen 0%där texten ligger närmast betraktaren och ligger under skärmen, utom synhåll, och avslutar sedan animeringen 100%där den är långt ifrån betraktaren och flyter upp och över skärmens överkant.
/* 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); ) )Låt oss nu använda den animationen på .crawlelementet:
.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; )Roliga tider med finjustering
Du kan ha lite roligare med saker när huvudeffekten är på plats. Vi kan till exempel lägga till lite blekning högst upp på skärmen för att framhäva effekten av att texten kryper in i fjärran:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Lägg till det elementet överst i HTML och texten flyter bakom en lutning som går från transparent till samma bakgrund som :
Det fullständiga exemplet
Här är den fullständiga koden från det här inlägget samlad.
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); ) )Andra exempel
Några andra har gjort mer trogna återgivningar av Star Wars-öppningen med andra tekniker än de som beskrivs här i det här inlägget.
Tim Pietrusky har en vackert orkestrerad version som använder topför rörelsen och för opacityatt skapa den blekande effekten:
Se Pen Star Wars öppningscrawl från 1977 av Tim Pietrusky (@TimPietrusky) på CodePen.
Yukulélé använder för marginatt flytta längs skärmen:
Se Pen Pure CSS Star Wars öppningsgenomsökning av Yukulélé (@yukulele) på CodePen.
Karottes använder transformungefär detta inlägg, men förlitar sig mer på TranslateYatt flytta texten längs Y-axis.
Se Pen Star Wars Crawl av Karottes (@Karottes) på CodePen.