Otevření Hvězdných válek je ikonické. Efekt posouvání textu nahoru i pryč od obrazovky byl pro film v roce 1977 šíleným skvělým speciálním efektem a skvělým typografickým stylem, který byl v té době zcela nový.
Podobného efektu můžeme dosáhnout pomocí HTML a CSS! Tento příspěvek je spíše o tom, jak tento posuvný textový efekt získat, než se snažit znovu vytvořit celou úvodní sekvenci Star Wars nebo odpovídat přesným stylům použitým ve filmu, takže pojďme na místo, kde je to konečný výsledek:
Podívejte se na Pen Star Wars Intro od Geoffa Grahama (@geoffgraham) na CodePen.
Základní HTML
Nejprve nastavíme HTML pro 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ává všechny kousky, které potřebujeme:
- Kontejner s názvem,
star-warskterý použijeme k umístění obsahu. To je také nutné, protože budeme používat vlastnostperspectiveCSS, kde mít nadřazený prvek je užitečný způsob, jak přidat hloubku nebo zkosittransformvlastnost podřízeného prvku . - Kontejner s názvem,
crawlkterý bude obsahovat skutečný text a bude prvkem, na který použijeme animaci CSS. - Obsah!
Možná jste si všimli, že název filmu je zabalen do extra kontejneru s názvem title. To není nutné, ale může vám poskytnout další možnosti stylingu, pokud je budete potřebovat.
Základní CSS
Trik je představit si trojrozměrný prostor, kde se text plazí svisle nahoru Y-axisa ven podél Z-axis. To vyvolává dojem, že je text současně posouván nahoru po obrazovce a od diváka.
Nejprve nastavíme dokument tak, aby na obrazovce nebylo možné rolovat. Chceme, aby text vycházel ze spodní části obrazovky, aniž by prohlížeč mohl text posouvat a vidět před vstupem. Můžeme overflow: hiddento udělat:
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; )Nyní můžeme přejít ke stylingu našeho star-warskontejneru, který je nadřazeným prvkem naší ukázky:
.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; )Dále můžeme na crawlprvek použít styly . Tento prvek je opět důležitý, protože obsahuje vlastnosti, které transformují text a budou animovány.
.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%; )Zatím máme pěkně vypadající hromadu textu, ale není ani zkosený, ani animovaný. Udělejme to.
Animace!
Na tom vám opravdu záleží, že? Nejprve definujeme @keyframesanimaci. Animace pro nás dělá něco víc než animaci, protože zde budeme přidávat naše transformvlastnosti, zejména pro pohyb podél Z-axis. Animaci začneme 0%tam, kde je text nejblíže k divákovi a je umístěn pod obrazovkou, mimo zobrazení, poté animaci ukončíme 100%tam, kde je daleko od prohlížeče a proudí nahoru a přes horní část 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); ) )Nyní použijeme tuto animaci na .crawlprvek:
.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 laděním
Jakmile bude hlavní efekt na místě, můžete si s věcmi trochu více užít. Například můžeme v horní části obrazovky přidat malé vyblednutí, které zvýrazní účinek plazivého textu do dálky:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Přidejte tento prvek do horní části HTML a text bude proudit za přechodem, který přechází z průhledného na stejné pozadí jako :
Celý příklad
Zde je celý kód z tohoto příspěvku stažen dohromady.
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); ) )Další příklady
Někteří další lidé vytvořili věrnější ztvárnění zahájení Hvězdných válek pomocí jiných technik než těch, které jsou popsány v tomto příspěvku.
Tim Pietrusky má krásně zorganizovanou verzi, kterou používá toppro pohyb a opacitypro vytvoření efektu blednutí:
Podívejte se na úvodní procházení hry Pen Star Wars z roku 1977 od Tim Pietrusky (@TimPietrusky) na CodePen.
Yukulélé používá margink pohybu po obrazovce:
Podívejte se na úvodní procházení hry Pen Pure CSS Star Wars od Yukulélé (@yukulele) na CodePen.
Karottes používá transformpodobně jako tento příspěvek, ale spoléhá se více na TranslateYpohyb textu po Y-axis.
Podívejte se na procházení Pen Star Wars od Karottes (@Karottes) na CodePen.