A Star Wars megnyitója ikonikus. A képernyőn mind felfelé, mind attól távol görgetve a szöveg 1977-ben egy őrült klassz speciális effektus volt, és egy klassz tipográfiai stílus, amely akkoriban teljesen új volt.
Hasonló hatást érhetünk el a HTML és a CSS segítségével! Ez a bejegyzés inkább arról szól, hogyan lehet elérni ezt a csúszó szöveghatást, ahelyett, hogy megpróbálnánk újrateremteni a teljes Csillagok háborúja kezdősort, vagy illeszkednünk a filmben használt pontos stílusokhoz, tehát térjünk oda, ahol ez a végeredmény:
Lásd Geoff Graham (@geoffgraham) Pen Star Wars Intro-ját a CodePen-en.
Az alapvető HTML
Először állítsunk be HTML-t a tartalomhoz:
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…
Ez megadja nekünk az összes szükséges darabot:
- Egy úgynevezett tároló, amelyet
star-warsa tartalom elhelyezésére használunk. Erre azért is szükség van, mert aperspectiveCSS tulajdonságot fogjuk használni , ahol a szülőelem használata hasznos módszer a mélység hozzáadásához vagy a gyermekelemtransformtulajdonságainak torzításához . - Egy úgynevezett tároló,
crawlamely a tényleges szöveget fogja tárolni, és amely az az elem, amelyre a CSS animációt alkalmazzuk. - A tartalmat!
Lehet, hogy észrevette, hogy a film címe egy úgynevezett extra tartályba van csomagolva title. Ez nem szükséges, de további stíluslehetőségeket kínálhat, ha szüksége van rájuk.
Az alapvető CSS
A trükk egy háromdimenziós tér elképzelése, ahol a szöveg függőlegesen csúszik felfelé Y-axisés kifelé a Z-axis. Ez azt a benyomást kelti, hogy a szöveg egyszerre csúszik felfelé a képernyőn és távol van a nézőtől.
Először állítsuk be a dokumentumot úgy, hogy a képernyőn ne lehessen görgetni. Azt akarjuk, hogy a szöveg a képernyő aljáról jöjjön fel, anélkül, hogy a néző képes lenne görgetni és látni a szöveget, mielőtt belépne. Használhatjuk overflow: hiddenerre:
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; )Most áttérhetünk a tárolónk stílusára star-wars, amely a bemutató szülő eleme:
.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; )Ezután stílusokat alkalmazhatunk az crawlelemre. Ez az elem ismét fontos, mert tartalmazza azokat a tulajdonságokat, amelyek átalakítják a szöveget és animálódnak.
.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%; )Eddig szép megjelenésű szövegcsomónk van, de az nem ferde és nem animált. Tessék ezt megvalósítani.
Élénkség!
Ez az, ami igazán érdekel, igaz? Először meghatározzuk @keyframesaz animációt. Az animáció valamivel többet jelent, mint az animáció számunkra, mert transformitt hozzá fogjuk adni a tulajdonságainkat, különösen a Z-axis. Az animációt 0%ott kezdjük, ahol a szöveg a legközelebb van a nézőhöz, és a képernyő alatt helyezkedik el, láthatatlanul, majd befejezzük az animációt ott, 100%ahol messze van a nézőtől, és felfelé áramlik a képernyő tetején.
/* 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); ) )Most alkalmazzuk ezt az animációt az .crawlelemre:
.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; )Szórakoztató idők finomhangolással
Kicsit jobban szórakozhat a dolgokban, ha a fő hatás megvan. Például felvehetünk egy kis fakulást a képernyő tetejére, hogy hangsúlyozzuk a távolba csúszó szöveg hatását:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Adja hozzá ezt az elemet a HTML tetejére, és a szöveg egy átmenet mögött folyik, amely átlátszóból ugyanahhoz a háttérhez megy, mint :
A teljes példa
Itt található a bejegyzés teljes kódja.
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); ) )Egyéb példák
Néhány más ember hűbben adta elő a Csillagok háborúja megnyitását más technikák alkalmazásával, mint amelyek ebben a bejegyzésben szerepelnek.
Tim Pietrusky gyönyörűen hangszerelt verzióval toprendelkezik a mozgáshoz és opacitya halványító hatás létrehozásához:
Lásd Tim Pietrusky (@TimPietrusky) 1977-es Pen Star Star Wars-os bejárását a CodePen-en.
Yukulélé margina képernyő mentén mozgatja a következőket:
Lásd Yukulélé (@yukulele) Pen Pure CSS Csillagok háborújának kezdő feltérképezését a CodePen-en.
Karottes transformhasonlóan ehhez a bejegyzéshez, de inkább arra támaszkodik TranslateY, hogy a szöveget a Y-axis.
Lásd Karottes (@Karottes) Pen Star Wars-feltérképezését a CodePen-en.