Odprtje Vojne zvezd je ikonično. Učinek drsenja besedila navzgor in stran od zaslona je bil tako nor, poseben učinek za film že leta 1977 kot kul tipografski slog, ki je bil takrat povsem nov.
Podoben učinek lahko dosežemo s HTML in CSS! Ta objava govori bolj o tem, kako doseči ta drsni besedilni učinek, namesto da bi poskušali znova ustvariti celotno zaporedno zaporedje Vojne zvezd ali ujemati natančne sloge, uporabljene v filmu, zato pridemo do mesta, kjer je to končni rezultat:
Oglejte si predstavitev Pen Star Wars Geffa Grahama (@geoffgraham) na CodePen.
Osnovni HTML
Najprej nastavimo HTML za vsebino:
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…
Tako dobimo vse potrebne dele:
- Vsebnik, imenovan,
star-warski ga bomo uporabili za postavitev vsebine. To je potrebno tudi zato, ker bomo uporabiliperspectivelastnost CSS, kjer je nadrejeni element koristen način za dodajanje globine ali poševnetransformlastnosti podrejenega elementa . - Vsebnik, imenovan,
crawlki bo vseboval dejansko besedilo in bo element, na katerega bomo uporabili animacijo CSS. - Vsebina!
Morda ste opazili, da je naslov filma ovit v dodatni vsebnik, imenovan title. To ni potrebno, lahko pa vam ponudi dodatne možnosti oblikovanja, če jih potrebujete.
Osnovni CSS
Trik je v tem, da si predstavljamo tridimenzionalni prostor, kjer besedilo leze navpično navzgor Y-axisin navzven Z-axis. To daje vtis, da besedilo hkrati zdrsne navzgor po zaslonu in stran od gledalca.
Najprej nastavimo dokument tako, da zaslona ni mogoče premikati. Želimo, da se besedilo prikaže z dna zaslona, ne da bi se gledalec lahko pomaknil in videl besedilo, preden vstopi. Za to lahko overflow: hiddennaredimo:
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; )Zdaj lahko preidemo na oblikovanje našega star-warsvsebnika, ki je nadrejeni element za našo predstavitev:
.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; )Nato lahko crawlelementu uporabimo sloge . Tudi ta element je pomemben, ker vsebuje lastnosti, ki bodo besedilo spremenile in animirale.
.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%; )Zaenkrat imamo lep videz kopice besedila, ki pa ni ne poševno ne animirano. Uresničimo to.
Animacija!
Za to vas res zanima, kajne? Najprej bomo definirali @keyframesanimacijo. Animacija za nas naredi le nekaj več kot animiranje, ker bomo tukaj dodali svoje transformlastnosti, zlasti za gibanje po Z-axis. Animacijo bomo začeli 0%tam, kjer je besedilo najbližje gledalcu in se nahaja pod zaslonom, zunaj pogleda, nato pa animacijo končamo 100%tam, kjer je daleč od gledalca in teče navzgor in čez vrh zaslona.
/* 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); ) )Zdaj pa uporabimo to animacijo na .crawlelementu:
.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; )Zabavni časi s fino nastavitvijo
Ko je glavni učinek na mestu, se lahko malo bolj zabavate s stvarmi. Na primer, lahko dodamo malo bledenja na vrhu zaslona, da poudarimo učinek besedila, ki leze v daljavo:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Ta element dodajte na vrh HTML-ja in besedilo bo teklo za prelivom, ki se iz prosojnega premakne na isto ozadje kot :
Celoten primer
Tukaj je povzeta celotna koda tega prispevka.
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); ) )Drugi primeri
Nekateri drugi ljudje so na odprtju Vojne zvezd izvedli bolj zveste izvedbe z drugimi tehnikami, kot so tiste, opisane v tem prispevku.
Tim Pietrusky ima čudovito orkestrirano različico, ki uporablja topgibanje in opacityustvarja učinek bledenja :
Oglejte si uvodno pajkanje Pen Star Wars iz leta 1977, ki ga je vodil Tim Pietrusky (@TimPietrusky) na CodePen.
Yukulélé uporablja marginza premikanje slike po zaslonu:
Oglejte si Pen Pure CSS Star Wars uvodno pajkanje Yukuléléja (@yukulele) na CodePen.
Karottes uporablja transformpodobno kot ta prispevek, vendar se bolj zanaša na TranslateYpremikanje besedila po Y-axis.
Oglejte si Pen Star Wars Crawl avtorja Karottes (@Karottes) na CodePen.