Otvaranje Ratova zvijezda je kultno. Učinak pomicanja teksta prema gore i dalje s ekrana bio je i ludi, kul specijalni efekt za film davne 1977. godine i kul tipografski stil koji je u to vrijeme bio potpuno nov.
Sličan učinak možemo postići s HTML-om i CSS-om! Ovaj je post više o tome kako doći do tog efekta kliznog teksta, umjesto da pokušavate iznova stvoriti puni slijed otvaranja Ratova zvijezda ili podudaranje točnih stilova korištenih u filmu, pa idemo na mjesto gdje je ovo konačni rezultat:
Pogledajte uvod u Ratove zvijezda Pen Geffa Grahama (@geoffgraham) na CodePenu.
Osnovni HTML
Prvo postavimo HTML za sadržaj:
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…
To nam daje sve dijelove koji su nam potrebni:
- Spremnik nazvan
star-warskoji ćemo koristiti za pozicioniranje sadržaja. To je također potrebno jer ćemo koristitiperspectivesvojstvo CSS, gdje je nadređeni element koristan način za dodavanje dubine ili iskrivljenjetransformsvojstva podređenog elementa . - Spremnik nazvan
crawlkoji će sadržavati stvarni tekst i biti element na koji primjenjujemo CSS animaciju. - Sadržaj!
Možda ste primijetili da je naslov filma zamotan u dodatni spremnik pod nazivom title. To nije potrebno, ali moglo bi vam pružiti dodatne mogućnosti oblikovanja ako vam zatrebaju.
Osnovni CSS
Trik je u zamišljanju trodimenzionalnog prostora u kojem tekst puže okomito gore Y-axisi van duž Z-axis. To ostavlja dojam da tekst istodobno klizi prema zaslonu i dalje od gledatelja.
Prvo, postavimo dokument tako da se zaslon ne može pomicati. Želimo da se tekst pojavi s dna zaslona, a da ga gledatelj ne može pomicati i vidjeti tekst prije nego što uđe. Možemo overflow: hiddento učiniti:
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; )Sada možemo prijeći na oblikovanje našeg star-warsspremnika, koji je nadređeni element naše demonstracije:
.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; )Dalje, na crawlelement možemo primijeniti stilove . Ponovno, ovaj je element važan jer sadrži svojstva koja će transformirati tekst i biti animirana.
.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%; )Za sada imamo gomilu teksta lijepog izgleda, ali on nije iskrivljen niti animiran. Učinimo to.
Animacija!
To je ono do čega vam je zapravo stalo, zar ne? Prvo ćemo definirati @keyframesanimaciju. Animacija radi malo više od animiranja za nas, jer ćemo transformovdje dodati svoja svojstva, posebno za kretanje duž Z-axis. Animaciju ćemo započeti 0%tamo gdje je tekst najbliži gledatelju i nalazi se ispod zaslona, izvan pogleda, a zatim ćemo završiti animaciju 100%tamo gdje je daleko od gledatelja i teče prema gore i preko vrha 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); ) )Sada, primijenimo tu animaciju na .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; )Zabavna vremena uz fino podešavanje
Možete se malo više zabaviti stvarima nakon što je glavni efekt na mjestu. Na primjer, možemo dodati malo blijeđenja na vrhu zaslona kako bismo naglasili učinak puzanja teksta u daljinu:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Dodajte taj element na vrh HTML-a i tekst će teći iza gradijenta koji ide od prozirne do iste pozadine kao i :
Cjelovit primjer
Evo cjelokupnog koda iz ovog posta.
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); ) )Ostali primjeri
Neki su ljudi izvodili vjernije izvedbe otvaranja Ratova zvijezda koristeći druge tehnike od onih obrađenih ovdje u ovom postu.
Tim Pietrusky ima lijepo orkestriranu verziju koja koristi topza pokret i opacityza stvaranje efekta blijeđenja:
Pogledajte indeksiranje Star Wars-a iz 1977, Tim Pietrusky (@TimPietrusky) na CodePenu.
Yukulélé koristi marginza pomicanje slike duž zaslona:
Pogledajte Pen Pure CSS Star Wars početno puzanje Yukuléléa (@yukulele) na CodePenu.
Karottes koristi transformsličan ovom postu, ali se više oslanja na TranslateYpomicanje teksta duž Y-axis.
Pogledajte Pen Star Wars Crawl od Karottesa (@Karottes) na CodePenu.