Åbningen til Star Wars er ikonisk. Effekten af tekstrulning både op og væk fra skærmen var både en skør sej specialeffekt for en film tilbage i 1977 og en cool typografisk stil, der var helt ny på det tidspunkt.
Vi kan opnå en lignende effekt med HTML og CSS! Dette indlæg handler mere om, hvordan du får den glidende teksteffekt i stedet for at prøve at genskabe den fulde Star Wars-åbningssekvens eller matche de nøjagtige stilarter, der er brugt i filmen, så lad os komme til et sted, hvor dette er det endelige resultat:
Se Pen Star Wars Intro af Geoff Graham (@geoffgraham) på CodePen.
Grundlæggende HTML
Lad os først oprette HTML til indholdet:
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…
Dette giver os alle de stykker, vi har brug for:
- En container kaldet,
star-warssom vi vil bruge til at placere indholdet. Dette er også nødvendigt, fordi vi brugerperspectiveCSS-egenskaben, hvor det at have et overordnet element er en nyttig måde at tilføje dybde eller skæve et underordnet elementstransformegenskab på. - En kaldet container
crawl, der indeholder den aktuelle tekst og er det element, som vi anvender CSS-animationen på. - Indholdet!
Du har måske bemærket, at filmtitlen er pakket i en ekstra beholder kaldet title. Dette er ikke nødvendigt, men kan give dig yderligere stylingindstillinger, hvis du har brug for dem.
Den grundlæggende CSS
Tricket er at forestille sig et tredimensionelt rum, hvor teksten kravler lodret op Y-axisog ud langs Z-axis. Dette giver indtryk af, at teksten både glider op på skærmen og væk fra seeren på samme tid.
Lad os først oprette dokumentet, så skærmen ikke kan rulles. Vi ønsker, at teksten skal komme op fra bunden af skærmen, uden at seeren er i stand til at rulle og se teksten, inden den kommer ind. Vi kan bruge overflow: hiddentil at gøre 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å videre til styling af vores star-warscontainer, som er det overordnede element for vores 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; )Derefter kan vi anvende stilarter på crawlelementet. Igen er dette element vigtigt, fordi det indeholder de egenskaber, der vil transformere teksten og blive animeret.
.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%; )Indtil videre har vi en flot tekstflok, men den er hverken skæv eller animeret. Lad os få det til at ske.
Animation!
Dette er hvad du virkelig holder af, ikke? Først skal vi definere den @keyframestil animationen. Animationen gør lidt mere end at animere for os, fordi vi tilføjer vores transformegenskaber her, især for bevægelsen langs Z-axis. Vi starter animationen, 0%hvor teksten er tættest på seeren og er placeret under skærmen, ude af syne, og afslutter derefter animationen, 100%hvor den er langt væk fra seeren og flyder op og over toppen af skærmen.
/* 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); ) )Lad os nu anvende den animation 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; )Sjove tider med finjustering
Du kan have lidt mere sjov med tingene, når hovedeffekten er på plads. For eksempel kan vi tilføje lidt fade øverst på skærmen for at fremhæve effekten af teksten, der kryber ud i det fjerne:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Tilføj dette element til toppen af HTML-en, og teksten flyder bag en gradient, der går fra gennemsigtig til samme baggrund som :
Det fulde eksempel
Her er den fulde kode fra dette indlæg samlet.
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); ) )Andre eksempler
Nogle andre har lavet mere trofaste gengivelser af Star Wars-åbningen ved hjælp af andre teknikker end dem, der er dækket her i dette indlæg.
Tim Pietrusky har en smukt orkestreret version, der bruger toptil bevægelsen og opacityskaber den falmende effekt:
Se Pen Star Wars åbningscrawl fra 1977 af Tim Pietrusky (@TimPietrusky) på CodePen.
Yukulélé bruger margintil at flytte langs skærmen:
Se Pen Pure CSS Star Wars åbningscrawl af Yukulélé (@yukulele) på CodePen.
Karottes bruger transformmeget som dette indlæg, men stoler mere på TranslateYat flytte teksten langs Y-axis.
Se Pen Star Wars Crawl af Karottes (@Karottes) på CodePen.