De opening naar Star Wars is iconisch. Het effect van tekst die zowel omhoog als weg van het scherm scrolde, was zowel een waanzinnig cool speciaal effect voor een film uit 1977 als een coole typografische stijl die destijds gloednieuw was.
We kunnen een soortgelijk effect bereiken met HTML en CSS! Dit bericht gaat meer over hoe je dat glijdende teksteffect kunt krijgen in plaats van te proberen de volledige Star Wars-openingsreeks opnieuw te maken of de exacte stijlen die in de film worden gebruikt, te matchen, dus laten we naar een plek gaan waar dit het uiteindelijke resultaat is:
Zie de Pen Star Wars Intro door Geoff Graham (@geoffgraham) op CodePen.
De basis-HTML
Laten we eerst HTML instellen voor de inhoud:
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…
Dit geeft ons alle onderdelen die we nodig hebben:
- Een container genaamd
star-warsdie we zullen gebruiken om de inhoud te positioneren. Dit is ook nodig omdat we deperspectiveCSS-eigenschap zullen gebruiken , waarbij het hebben van een bovenliggend element een handige manier is om diepte toe te voegen of detransformeigenschap van een onderliggend element scheef te trekken . - Een container genaamd
crawldie de daadwerkelijke tekst bevat en het element is waarop we de CSS-animatie toepassen. - De inhoud!
Het is je misschien opgevallen dat de filmtitel is verpakt in een extra container met de naam title. Dit is niet nodig, maar kan u extra stylingopties bieden als u ze nodig heeft.
De basis CSS
De truc is om je een driedimensionale ruimte voor te stellen waar de tekst verticaal omhoog Y-axisen langs de Z-axis. Dit geeft de indruk dat de tekst tegelijkertijd over het scherm wordt geschoven en weg van de kijker.
Laten we eerst het document zo instellen dat er niet op het scherm kan worden gescrolld. We willen dat de tekst vanaf de onderkant van het scherm naar boven komt zonder dat de kijker kan scrollen en de tekst kan zien voordat deze binnenkomt. We kunnen dat gebruiken overflow: hidden:
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 kunnen we doorgaan met het stylen van onze star-warscontainer, het bovenliggende element voor onze 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; )Vervolgens kunnen we stijlen op het crawlelement toepassen . Nogmaals, dit element is belangrijk omdat het de eigenschappen bevat die de tekst zullen transformeren en geanimeerd zullen worden.
.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%; )Tot nu toe hebben we een mooie stapel tekst, maar deze is niet scheef of geanimeerd. Laten we dat laten gebeuren.
Animatie!
Dit is waar je echt om geeft, toch? Eerst gaan we de @keyframesvoor de animatie definiëren . De animatie doet iets meer dan animeren voor ons, omdat we hier onze transformeigenschappen gaan toevoegen , vooral voor de beweging langs de Z-axis. We starten de animatie op de plaats 0%waar de tekst het dichtst bij de kijker staat en zich onder het scherm bevindt, uit het zicht, en eindigen de animatie op een plaats 100%waar deze ver weg is van de kijker en omhoog en over de bovenkant van het scherm stroomt.
/* 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); ) )Laten we nu die animatie toepassen op het .crawlelement:
.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; )Leuke tijden met fijnafstelling
Je kunt wat meer plezier beleven aan dingen als het hoofdeffect eenmaal op zijn plaats is. We kunnen bijvoorbeeld een kleine vervaging aan de bovenkant van het scherm toevoegen om het effect van de tekst die in de verte kruipt, te accentueren:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Voeg dat element toe aan de bovenkant van de HTML en de tekst loopt achter een verloop dat van transparant naar dezelfde achtergrond gaat als de :
Het volledige voorbeeld
Hier is de volledige code van dit bericht bij elkaar getrokken.
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 voorbeelden
Sommige andere mensen hebben meer getrouwe vertolkingen van de Star Wars-opening gemaakt met behulp van andere technieken dan degene die hier in dit bericht worden behandeld.
Tim Pietrusky heeft een prachtig georkestreerde versie gebruikt topvoor de beweging en opacityom het vervagende effect te creëren:
Bekijk de Pen Star Wars-openingscrawl uit 1977 door Tim Pietrusky (@TimPietrusky) op CodePen.
Yukulélé gebruikt marginom de langs het scherm te verplaatsen:
Zie de Pen Pure CSS Star Wars-openingscrawl door Yukulélé (@yukulele) op CodePen.
Karottes gebruikt transformveel zoals dit bericht, maar vertrouwt er meer op TranslateYom de tekst langs de Y-axis.
Zie de Pen Star Wars Crawl van Karottes (@Karottes) op CodePen.