Åpningen til Star Wars er ikonisk. Effekten av tekstrulling både opp og bort fra skjermen var både en sprø kul spesialeffekt for en film tilbake i 1977 og en kul typografisk stil som var helt ny på den tiden.
Vi kan oppnå en lignende effekt med HTML og CSS! Dette innlegget handler mer om hvordan du får den glidende teksteffekten i stedet for å prøve å lage den fullstendige Star Wars-åpningssekvensen eller matche de eksakte stilene som brukes i filmen, så la oss komme til et sted der dette er det endelige resultatet:
Se Pen Star Wars Intro av Geoff Graham (@geoffgraham) på CodePen.
Den grunnleggende HTML
La oss først sette opp HTML for innholdet:
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 gir oss alle delene vi trenger:
- En container kalt
star-warssom vi vil bruke til å posisjonere innholdet. Dette er også nødvendig fordi vi vil brukeperspectiveCSS-egenskapen, der det å ha et overordnet element er en nyttig måte å legge til dybde eller forvride et underordnet elementstransformeiendom. - En container kalt
crawlsom vil inneholde den faktiske teksten og være elementet vi bruker CSS-animasjonen på. - Innholdet!
Du har kanskje lagt merke til at filmtittelen er pakket inn i en ekstra beholder som heter title. Dette er ikke nødvendig, men kan gi deg flere valg for styling hvis du trenger dem.
Den grunnleggende CSS
Trikset er å forestille seg et tredimensjonalt rom der teksten kryper loddrett opp Y-axisog ut langs Z-axis. Dette gir inntrykk av at teksten både glir oppover skjermen og vekk fra betrakteren samtidig.
La oss først sette opp dokumentet slik at skjermen ikke kan rulles. Vi vil at teksten skal komme opp fra bunnen av skjermen uten at betrakteren kan bla og se teksten før den kommer inn. Vi kan bruke overflow: hiddentil å gjø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; )Nå kan vi gå videre til styling av star-warscontaineren vår , som er overordnet element for 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; )Deretter kan vi bruke stiler på crawlelementet. Igjen, dette elementet er viktig fordi det inneholder egenskapene som vil transformere teksten og bli animert.
.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%; )Så langt har vi en fin tekstbunt, men den er verken skjev eller animert. La oss få det til å skje.
Animasjon!
Dette er det du virkelig bryr deg om, ikke sant? Først skal vi definere @keyframesanimasjonen. Animasjonen gjør litt mer enn å animere for oss, fordi vi skal legge til transformegenskapene våre her, spesielt for bevegelsen langs Z-axis. Vi starter animasjonen 0%der teksten er nærmest betrakteren og ligger under skjermen, utenfor synet, og avslutter deretter animasjonen 100%der den er langt borte fra betrakteren og flyter opp og over toppen av skjermen.
/* 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); ) )La oss nå bruke animasjonen 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; )Morsomme tider med finjustering
Du kan ha det litt morsommere med ting når hovedeffekten er på plass. For eksempel kan vi legge til litt fade øverst på skjermen for å fremheve effekten av at teksten kryper ut i det fjerne:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Legg til det elementet øverst i HTML-en, og teksten flyter bak en gradient som går fra gjennomsiktig til samme bakgrunn som :
Det fulle eksemplet
Her er den fulle koden fra dette innlegget 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
Noen andre har gjort mer trofaste gjengivelser av Star Wars-åpningen ved hjelp av andre teknikker enn de som er dekket her i dette innlegget.
Tim Pietrusky har en vakkert orkestrert versjon som bruker topfor bevegelsen og for opacityå skape den falmende effekten:
Se Pen Star Wars åpningsgjennomgang fra 1977 av Tim Pietrusky (@TimPietrusky) på CodePen.
Yukulélé bruker margintil å flytte langs skjermen:
Se Pen Pure CSS Star Wars åpningsgjennomgang av Yukulélé (@yukulele) på CodePen.
Karottes bruker transformmye som dette innlegget, men stoler mer på TranslateYå flytte teksten langs Y-axis.
Se Pen Star Wars Crawl av Karottes (@Karottes) på CodePen.