Otvorenie Hviezdnych vojen je ikonické. Účinok rolovania textu smerom hore aj od obrazovky bol pre film späť v roku 1977 bláznivým super efektom a super typografickým štýlom, ktorý bol v tom čase úplne nový.
Podobný efekt môžeme dosiahnuť pomocou HTML a CSS! Tento príspevok sa zaoberá skôr tým, ako získať tento efekt kĺzavého textu, ako sa pokúšať znovu vytvoriť celú úvodnú sekvenciu Star Wars alebo zodpovedať presným štýlom použitým vo filme, takže poďme na miesto, kde je to konečný výsledok:
Prezrite si predstavenie Pen Star Wars od Geoffa Grahama (@geoffgraham) na stránkach CodePen.
Základné HTML
Najskôr nastavíme HTML pre obsah:
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 nám dáva všetky potrebné kúsky:
- Kontajner s názvom,
star-warsktorý použijeme na umiestnenie obsahu. Je to tiež nevyhnutné, pretože budeme používať vlastnosťperspectiveCSS, kde vlastníctvo nadradeného prvku je užitočný spôsob, ako pridať hĺbku alebo skresliť vlastnosť podradeného prvkutransform. - Volaný kontajner,
crawlktorý bude obsahovať skutočný text a bude prvkom, na ktorý použijeme animáciu CSS. - Obsah!
Možno ste si všimli, že filmový titul je zabalený v extra kontajneri s názvom title. To nie je potrebné, ale v prípade potreby vám môžu poskytnúť ďalšie možnosti stylingu.
Základné CSS
Trik je predstaviť si trojrozmerný priestor, kde sa text plazí zvisle hore Y-axisa von pozdĺž Z-axis. To vytvára dojem, že text je súčasne vysunutý po obrazovke a preč od diváka.
Najskôr nastavíme dokument tak, aby sa na obrazovke nedalo rolovať. Chceme, aby text vychádzal zo spodnej časti obrazovky bez toho, aby divák mohol text posúvať a vidieť ho skôr, ako vstúpi. Môžeme overflow: hiddento urobiť takto:
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; )Teraz môžeme prejsť k stylingu nášho star-warskontajnera, ktorý je nadradeným prvkom našej ukážky:
.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; )Ďalej môžeme na crawlprvok použiť štýly . Tento prvok je opäť dôležitý, pretože obsahuje vlastnosti, ktoré transformujú text a budú animované.
.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%; )Zatiaľ máme pekne vyzerajúci text, ktorý však nie je skreslený ani animovaný. Urobme to.
Animácia!
Na tom vám skutočne záleží, však? Najskôr definujeme @keyframesanimáciu. Animácia pre nás robí niečo viac ako animovanie, pretože tu budeme pridávať svoje transformvlastnosti, najmä čo sa týka pohybu pozdĺž Z-axis. Animáciu začneme 0%tam, kde je text najbližšie k divákovi a nachádza sa pod obrazovkou, mimo zobrazenia. Potom animáciu skončíme 100%tam, kde je ďaleko od diváka a tečie hore a cez hornú časť obrazovky.
/* 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); ) )Teraz použijeme túto animáciu na .crawlprvok:
.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; )Zábavné časy s jemným doladením
Keď bude hlavný efekt na mieste, môžete si s vecami užiť trochu viac zábavy. Napríklad môžeme pridať trochu zosvetlenia v hornej časti obrazovky, aby sme zvýraznili efekt textu, ktorý lezie do diaľky:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Pridajte tento prvok do hornej časti kódu HTML a text bude prúdiť za prechodom, ktorý prechádza z priehľadného na rovnaké pozadie ako :
Celý príklad
Tu je celý kód z tohto príspevku zhromaždený k sebe.
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); ) )Ostatné príklady
Niektorí ďalší ľudia vytvorili vernejšie otvorenie Hviezdnych vojen pomocou iných techník, ako sú postupy uvedené v tomto príspevku.
Tim Pietrusky má nádherne zorganizovanú verziu, ktorá slúži topna pohyb a opacityvytvorenie efektu blednutia:
Prezrite si úvodné lezenie Pen Star Wars z roku 1977 od Tim Pietrusky (@TimPietrusky) na stránkach CodePen.
Yukulélé používa marginna pohyb po obrazovke:
Pozrite sa na úvodné prechádzanie hry Pen Pure CSS Star Wars od Yukulélé (@yukulele) na stránke CodePen.
Karottes používa transformpodobný príspevok, ale spolieha sa viac na TranslateYpresun textu po Y-axis.
Prezrite si prechádzanie perom Star Wars od Karottes (@Karottes) na stránkach CodePen.