Zvaigžņu karu atklāšana ir ikoniska. Teksta ritināšanas efekts gan uz ekrāna, gan no ekrāna bija gan neprātīgi foršs filmas specefekts tālajā 1977. gadā, gan stilīgais tipogrāfiskais stils, kas tajā laikā bija pavisam jauns.
Līdzīgu efektu mēs varam sasniegt ar HTML un CSS! Šis ieraksts ir vairāk par to, kā iegūt šo slīdošo teksta efektu, nevis mēģināt atjaunot pilnu Zvaigžņu karu sākuma secību vai saskaņot precīzus filmā izmantotos stilus, tāpēc nonāksim vietā, kur tas ir galīgais rezultāts:
Skatiet Geoff Graham (@geoffgraham) Pen Zvaigžņu karu ievadu vietnē CodePen.
Pamata HTML
Vispirms izveidosim HTML saturam:
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…
Tas dod mums visus nepieciešamos gabalus:
- Tvertne ar nosaukumu,
star-warskuru mēs izmantosim, lai izvietotu saturu. Tas ir nepieciešams arī tāpēc, ka mēs izmantosimperspectiveCSS rekvizītu, kur vecāku elementa izmantošana ir noderīgs veids, kā pievienot dziļumu vai izkropļot bērna elementatransformīpašumu. - Sauktais konteiners,
crawlkurā tiks ievietots faktiskais teksts un kurš būs elements, kuram mēs izmantosim CSS animāciju. - Saturs!
Jūs, iespējams, pamanījāt, ka filmas nosaukums ir iesaiņots papildu traukā, ko sauc title. Tas nav nepieciešams, taču, ja nepieciešams, tas varētu sniegt jums papildu stila iespējas.
Pamata CSS
Triks ir iedomāties trīsdimensiju telpu, kur teksts rāpo vertikāli augšup Y-axisun ārā gar Z-axis. Tas rada iespaidu, ka teksts vienlaikus tiek gan virzīts uz augšu pa ekrānu, gan prom no skatītāja.
Vispirms iestatīsim dokumentu tā, lai ekrāns nebūtu ritināms. Mēs vēlamies, lai teksts tiktu parādīts no ekrāna apakšas, skatītājam nespējot ritināt un redzēt tekstu pirms tā ievadīšanas. Mēs to varam izmantot overflow: hidden:
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; )Tagad mēs varam pāriet uz star-warskonteinera veidošanu , kas ir mūsu demonstrācijas pamatelements:
.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; )Tālāk mēs varam crawlelementam piemērot stilus . Arī šis elements ir svarīgs, jo tajā ir īpašības, kas pārveidos tekstu un tiks animētas.
.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%; )Līdz šim mums ir jauka izskata teksta kopa, taču tas nav nedz šķībs, nedz animēts. Lai tas notiek.
Animācija!
Tas ir tas, kas jums patiešām rūp, vai ne? Pirmkārt, mēs definēsim @keyframesanimācijai. Animācija ir nedaudz vairāk nekā animācija mūsu labā, jo mēs transformšeit pievienosim savas īpašības, it īpaši kustībai gar Z-axis. Mēs sāksim animāciju vietā, 0%kur teksts ir vistuvāk skatītājam un atrodas zem ekrāna, bez redzamības, pēc tam beigsim animāciju vietā, 100%kur tā atrodas tālu no skatītāja un plūst augšup un virs ekrāna augšdaļas.
/* 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); ) )Tagad izmantosim šo animāciju .crawlelementam:
.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; )Jautri laiki ar precizējumu
Kad galvenais efekts ir izveidots, jūs varat mazliet vairāk izklaidēties ar lietām. Piemēram, mēs varam pievienot nelielu izbalēšanu ekrāna augšdaļā, lai akcentētu teksta, kas rāpjas tālumā, efektu:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Pievienojiet šo elementu HTML augšdaļai, un teksts plūst aiz gradienta, kas no caurspīdīga iet uz to pašu fonu kā :
Pilns piemērs
Šeit ir pilns šīs ziņas kods, kas savilkts kopā.
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); ) )Citi piemēri
Daži citi ļaudis ir veikuši uzticīgākus Zvaigžņu karu atvēršanas variantus, izmantojot citus paņēmienus, nevis tos, kas aplūkoti šajā amatā.
Timam Pietruskijam ir skaisti orķestrēta versija, kas izmantota topkustībai un opacityizbalēšanas efekta radīšanai:
Skatiet Tim Pietrusky (@ TimPietrusky) Pen Star Zvaigžņu karu atklāšanas pārmeklēšanu vietnē CodePen.
Yukulélé izmanto, marginlai pārvietotos pa ekrānu:
Skatiet Yukulélé (@yukulele) Pen Pure CSS Star Wars atklāšanas rāpuļprogrammu vietnē CodePen.
Karottes izmanto transformlīdzīgi šim ierakstam, taču vairāk paļaujas uz TranslateYteksta pārvietošanu pa Y-axis.
Skatiet Karottes (@Karottes) Pen Star Wars pārmeklēšanu vietnē CodePen.