Tähtien sota-aukko on ikoninen. Sekä ylös- että poispäin ruudulta vieritetyn tekstin vaikutus oli sekä hullu viileä erikoistehoste elokuvalle vuonna 1977 että viileä typografinen tyyli, joka oli tuolloin aivan uusi.
Voimme saavuttaa samanlaisen vaikutuksen HTML: llä ja CSS: llä! Tämä viesti on enemmän siitä, miten saada liukuva tekstitehoste sen sijaan, että yritettäisiin luoda uudelleen koko Tähtien sota -aloitussarja tai sovittaa elokuvassa käytetyt tyylit, joten menemme paikkaan, jossa tämä on lopputulos:
Katso Geoff Grahamin (@geoffgraham) Pen Star Wars -esittely CodePenistä.
HTML-perustiedot
Aluksi määritetään HTML sisällölle:
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…
Tämä antaa meille kaikki tarvitsemamme palat:
- Nimeltään kontti, jota
star-warskäytämme sisällön sijoittamiseen. Tämä on tarpeen myös siksi, että käytämmeperspectiveCSS-ominaisuutta, jossa vanhemman elementin saaminen on hyödyllinen tapa lisätä syvyyttä tai vääristää lapsielementintransformominaisuutta. - Nimeltään kontti
crawl, joka pitää sisällään varsinaisen tekstin ja on se elementti, johon sovellamme CSS-animaatiota. - Sisältö!
Olet ehkä huomannut, että elokuvan nimi on kääritty ylimääräiseen astiaan nimeltä title. Tämä ei ole välttämätöntä, mutta voi tarjota sinulle muita muotoiluvaihtoehtoja, jos tarvitset niitä.
Perus CSS
Temppu on kuvitella kolmiulotteinen tila, jossa teksti indeksoi pystysuoraan ylös Y-axisja ulos pitkin Z-axis. Tämä antaa vaikutelman, että teksti liukuu samanaikaisesti ylöspäin näytöltä ja poispäin katsojasta.
Aluksi asetetaan asiakirja siten, että näyttöä ei voi vierittää. Haluamme, että teksti tulee ylös näytön alareunasta ilman, että katsoja voi vierittää ja nähdä tekstiä ennen sen saapumista. Voimme overflow: hiddentehdä sen:
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; )Nyt voimme siirtyä star-warskontin muotoiluun , joka on esittelymme pääelementti:
.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; )Seuraavaksi voimme soveltaa crawlelementteihin tyylejä . Jälleen tämä elementti on tärkeä, koska se sisältää ominaisuuksia, jotka muuttavat tekstiä ja animoituvat.
.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%; )Toistaiseksi meillä on mukava näköinen joukko tekstiä, mutta se ei ole vinossa eikä animoitu. Tehdään niin.
Animaatio!
Tämä on mitä todella välität, eikö? Ensin määrittelemme @keyframesanimaation. Animaatio on vähän enemmän kuin animointi meille, koska aiomme lisätä transformominaisuuksia täällä, erityisesti liikkumista pitkin Z-axis. Aloitamme animaation kohdasta, 0%jossa teksti on lähinnä katsojaa ja sijaitsee ruudun alla, näkyvissä, ja lopetamme animaation paikassa, 100%jossa se on kaukana katsojasta ja virtaa ylös ja ruudun yläosaan.
/* 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); ) )Sovelletaan nyt animaatiota .crawlelementille:
.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; )Hauskat ajat hienovirityksellä
Voit pitää hauskaa asioiden kanssa, kun päävaikutus on paikallaan. Esimerkiksi voimme lisätä hiukan haalistumista näytön yläosaan korostamaan etäisyydelle indeksoivan tekstin vaikutusta:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Lisää tämä elementti HTML: n yläosaan ja teksti kulkee liukuvärin taakse, joka menee läpinäkyvästä samalle taustalle kuin :
Koko esimerkki
Tässä on tämän viestin koko koodi koottu yhteen.
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); ) )Muita esimerkkejä
Jotkut muut ihmiset ovat tehneet uskollisempia esityksiä Tähtien sota-aukkoista käyttämällä muita tekniikoita kuin mitä tässä viestissä käsitellään.
Tim Pietruskyllä on kauniisti orkestroitu versio, joka käyttää topliikettä ja opacityhäivytysvaikutuksen luomista:
Katso Tim Pietruskyn (@TimPietrusky) kynätähtien sota-avaaminen vuodesta 1977 CodePenillä.
Yukulélé käyttää marginsiirtämään näyttöä pitkin:
Katso Yukulélén (@yukulele) Pen Pure CSS Star Wars -tapahtuman avausindeksi CodePenillä.
Karottes käyttää transformpaljon kuin tämä viesti, mutta luottaa enemmän TranslateYtekstin siirtämiseen Y-axis.
Katso Karottesin (@Karottes) Pen Star Wars Crawl CodePen -palvelusta.