Tähesõdade avamine on ikooniline. Nii ekraanilt üles kui ka ekraanilt eemale kerimise mõju oli nii meeletult lahe eriefekt filmidele juba 1977. aastal kui ka lahe tüpograafiline stiil, mis oli tol ajal täiesti uus.
Saame saavutada sarnase efekti HTML-i ja CSS-i abil! See postitus räägib pigem selle kohta, kuidas seda libisevat tekstiefekti saada, selle asemel et proovida uuesti luua kogu Tähesõdade avasarja või sobitada filmis kasutatud täpsete stiilidega, nii et jõuame kohta, kus see on lõpptulemus:
Vaadake CodePenil Geoff Grahami (@geoffgraham) Pen Star Wars'i tutvustust.
Põhiline HTML
Kõigepealt seadistame sisu jaoks HTML-i:
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…
See annab meile kõik vajaminevad tükid:
- Nimega konteiner,
star-warsmida kasutame sisu paigutamiseks. See on vajalik ka seetõttu, et kasutameperspectiveatribuuti CSS, kus vanemelemendi omamine on kasulik viis lapse elemenditransformomaduste sügavuse lisamiseks või kallutamiseks . - Konteiner nimega
crawl, mis mahutab tegelikku teksti ja on element, millele CSS-i animatsiooni rakendame. - Sisu!
Võib-olla olete märganud, et filmi pealkiri on pakitud lisanõusse nimega title. See pole vajalik, kuid võib pakkuda teile täiendavaid stiilivalikuid, kui neid vajate.
Põhiline CSS
Trikk on ette kujutada kolmemõõtmelist ruumi, kus tekst indekseerib vertikaalselt Y-axismööda ja välja Z-axis. See jätab mulje, et tekst libiseb korraga nii ekraanil ülespoole kui ka vaatajast eemale.
Kõigepealt seadistame dokumendi nii, et ekraan ei oleks keritav. Soovime, et tekst tuleks ekraani alt üles, ilma et vaataja saaks teksti enne selle sisestamist kerida ja näha. Saame seda overflow: hiddenteha:
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; )Nüüd saame edasi minna oma star-warskonteineri kujundamisele , mis on meie demo põhielement:
.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; )Järgmisena saame crawlelemendile stiilid rakendada . Jällegi on see element oluline, kuna see sisaldab omadusi, mis muudavad teksti ja animeeritakse.
.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%; )Siiani on meil kena välimusega hunnik teksti, kuid see pole ei viltu ega animeeritud. Teeme selle teoks.
Animatsioon!
See on see, millest sa tegelikult hoolid, eks? Kõigepealt määratleme @keyframesanimatsiooni jaoks. Animatsioon teeb natuke rohkem kui animeerimine meie jaoks, sest lisame transformsiia oma omadused, eriti liikumise jaoks mööda Z-axis. Alustame animatsiooni kohas, 0%kus tekst on vaatajale kõige lähemal ja asub ekraani all, vaateväljas, seejärel lõpetame animatsiooni kohas, 100%kus see on vaatajast kaugel ning liigub üles ja üle ekraani ülaosa.
/* 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); ) )Rakendame nüüd selle animatsiooni .crawlelemendile:
.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; )Lõbusad ajad peenhäälestusega
Kui peamine efekt on paigas, saate asjadega veidi lõbusamalt tegeleda. Näiteks võime ekraani ülaossa lisada väikese tuhmumise, et rõhutada kaugele roomava teksti mõju:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Lisage see element HTML-i ülaossa ja tekst voolab gradiendi taga, mis läheb läbipaistvast samale taustale nagu :
Täielik näide
Siin on selle postituse täielik kood kokku tõmmatud.
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); ) )Muud näited
Mõned teised inimesed on teinud Tähesõdade avanemisest ustavamaid versioone, kasutades muid tehnikaid kui need, mida siin postituses käsitletakse.
Tim Pietruskyl on kaunilt orkestreeritud versioon, mis kasutab topliikumist ja hääbuva opacityefekti loomist:
Vaadake Tim Pietrusky (@TimPietrusky) poolt CodePenil 1971. aastast avanenud Indeksi tähesõdade indekseerimist.
Yukulélé kasutab marginekraani mööda liikumist:
Vaadake Code Penil Yukulélé (@ yukulele) Pen Pure CSS Star Wars'i indekseerimise avaindeksit.
Karottes kasutab transformsarnaselt sellele postitusele, kuid loodab TranslateYteksti pikendamiseks pikemalt Y-axis.
Vaadake Code Star'il Karottese (@Karottes) Pen Star Wars'i indekseerimist.