Žvaigždžių karų tikrinimo tekstas CSS-gudrybės

Žvaigždžių karų atidarymas yra ikoniškas. Teksto slinkimas ekrano aukštyn ir toli nuo jo buvo ir beprotiškai šaunus specialus filmo efektas dar 1977 m., Ir šaunus tipografinis stilius, kuris tuo metu buvo visiškai naujas.

Panašų efektą galime pasiekti naudodami HTML ir CSS! Šis įrašas yra daugiau apie tai, kaip gauti tą slenkantį teksto efektą, o ne bandyti iš naujo sukurti visą „Žvaigždžių karų“ atidarymo seką arba atitikti tikslius filme naudojamus stilius, todėl eikime į vietą, kur tai yra galutinis rezultatas:

Žr. Geoffo Grahamo (@geoffgraham) „Pen Star Star Wars“ įvadą „CodePen“.

Pagrindinis HTML

Pirmiausia nustatykime turinio HTML:

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…

Tai suteikia mums visus reikalingus gabalus:

• Vadinamasis konteineris star-wars, kurį naudosime turinio išdėstymui. Tai taip pat būtina, nes mes naudosime perspectiveCSS ypatybę, kur pagrindinis elementas yra naudingas būdas pridėti gylį arba iškreipti antrinio elemento ypatybes transform.
• Vadinamasis konteineris, crawlkuriame bus tikrasis tekstas ir kuris bus elementas, kuriam pritaikysime CSS animaciją.
• Turinys!

Galbūt pastebėjote, kad filmo pavadinimas suvyniotas į papildomą indą, vadinamą title. Tai nėra būtina, tačiau jums gali prireikti papildomų stiliaus parinkčių.

Pagrindinis CSS

Apgaulė yra įsivaizduoti trimatę erdvę, kurioje tekstas vertikaliai nuskaitys aukštyn Y-axisir išilgai Z-axis. Tai sukuria įspūdį, kad tekstas vienu metu slenka ir ekranu aukštyn, ir toliau nuo žiūrovo.

Pirmiausia nustatykime dokumentą taip, kad ekranas nebūtų slinktinas. Norime, kad tekstas pasirodytų iš ekrano apačios, žiūrovui negalint slinkti ir pamatyti teksto prieš jam įeinant. Mes galime overflow: hiddentai padaryti:

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; )

Dabar galime pereiti prie star-warskonteinerio, kuris yra pagrindinis mūsų demonstracinis elementas, stiliaus :

.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; )

Toliau crawlelementui galime pritaikyti stilius . Vėlgi, šis elementas yra svarbus, nes jame yra savybių, kurios transformuos tekstą ir bus animuotos.

.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%; )

Iki šiol turime gražiai atrodantį teksto krūvą, tačiau jis nėra nei iškreiptas, nei animuotas. Tegul tai įvyksta.

Animacija!

Tai jums tikrai rūpi, tiesa? Pirmiausia mes apibrėžsime @keyframesanimaciją. Animacija daro šiek tiek daugiau nei animacija mums, nes transformčia pridėsime savo savybes, ypač judėjimui palei Z-axis. Pradėsime animaciją ten, 0%kur tekstas yra arčiausiai žiūrovo ir yra po ekranu, be matymo, tada užbaigsime animaciją ten, 100%kur ji yra toli nuo žiūrovo ir teka aukštyn ir virš ekrano viršaus.

/* 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); ) )

Dabar pritaikykime animaciją .crawlelementui:

.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; )

Įdomūs laikai su tiksliu derinimu

Kai pasieksite pagrindinį efektą, galėsite šiek tiek smagiau praleisti daiktus. Pavyzdžiui, ekrano viršuje galime pridėti šiek tiek išblukimo, kad paryškintume tolumoje nuskaityto teksto efektą:

.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )

Pridėkite tą elementą prie HTML viršaus ir tekstas tekės už gradiento, kuris eis nuo skaidraus iki to paties fono kaip :

Visas pavyzdys

Čia yra visas šio įrašo kodas, sujungtas.

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); ) )

Kiti pavyzdžiai

Kai kurie kiti žmonės ištikimiau perdavė „Žvaigždžių karus“, naudodami kitas technikas, nei aprašytos šiame įraše.

Timas Pietrusky turi gražiai orkestruotą versiją, naudojamą topjudėjimui ir opacityblukimo efektui sukurti:

Žr. Tim Pietrusky (@TimPietrusky) atidarytą „Pen Star Star Wars“ nuskaitymą nuo 1977 m. „CodePen“.

„Yukulélé“ naudoja marginjudėti ekrane išilgai:

Žr. „Pen Pure CSS Žvaigždžių karų“ atidarymą, kurį „CodePen“ sukūrė Yukulélé (@yukulele).

Karottes naudoja transformpanašiai kaip šį įrašą, tačiau labiau remiasi TranslateYteksto perkėlimu palei Y-axis.

Žr. Karottes (@Karottes) „Pen Star Star Wars“ nuskaitymą „CodePen“.