Deschiderea către Star Wars este iconică. Efectul derulării textului atât în sus, cât și în afară de pe ecran a fost atât un efect special nebun pentru un film din 1977, cât și un stil tipografic rece, care era nou în acea vreme.
Putem obține un efect similar cu HTML și CSS! Această postare este mai mult despre cum să obțineți acel efect de text glisant, mai degrabă decât să încercați să recreați secvența de deschidere completă a Star Wars sau să se potrivească stilurile exacte utilizate în film, așa că haideți să ajungem într-un loc în care acesta este rezultatul final:
Vedeți Pen Star Wars Intro de Geoff Graham (@geoffgraham) pe CodePen.
HTML de bază
Mai întâi, să configurăm HTML pentru conținut:
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…
Acest lucru ne oferă toate piesele de care avem nevoie:
- Un container numit pe
star-warscare îl vom folosi pentru a poziționa conținutul. Acest lucru este, de asemenea, necesar, deoarece vom folosiperspectiveproprietatea CSS, unde a avea un element părinte este o modalitate utilă de a adăuga adâncimea sau de a înclina proprietatea unui element copiltransform. - Un container numit
crawlcare va conține textul real și va fi elementul căruia îi aplicăm animația CSS. - Continutul!
Este posibil să fi observat că titlul filmului este înfășurat într-un container suplimentar numit title. Acest lucru nu este necesar, dar ar putea să vă ofere opțiuni suplimentare de styling dacă aveți nevoie de ele.
CSS de bază
Trucul este să vă imaginați un spațiu tridimensional în care textul se târăște vertical în sus Y-axisși în afară de-a lungul Z-axis. Acest lucru dă impresia că textul glisează pe ecran și se îndepărtează de vizualizator în același timp.
Mai întâi, să configurăm documentul astfel încât ecranul să nu poată fi derulat. Vrem ca textul să apară din partea de jos a ecranului fără ca vizualizatorul să poată derula și vedea textul înainte de a intra. Putem overflow: hiddenface asta:
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; )Acum putem trece la stilizarea star-warscontainerului nostru , care este elementul părinte pentru demo-ul nostru:
.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; )În continuare, putem aplica stiluri crawlelementului. Din nou, acest element este important deoarece conține proprietățile care vor transforma textul și vor fi animate.
.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%; )Până în prezent, avem o grămadă de text frumos, dar nu este înclinat și nici animat. Să facem asta să se întâmple.
Animaţie!
De asta îți pasă cu adevărat, nu? În primul rând, vom defini @keyframespentru animație. Animația face ceva mai mult decât animația pentru noi, pentru că vom adăuga transformproprietățile noastre aici, în special pentru mișcarea de-a lungul Z-axis. Vom începe animația în 0%locul în care textul este cel mai apropiat de vizualizator și este situat sub ecran, în afara vederii, apoi vom încheia animația în 100%locul în care este departe de vizualizator și curge în sus și peste partea de sus a ecranului.
/* 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); ) )Acum, să aplicăm acea animație pe .crawlelement:
.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; )Momente distractive cu reglarea fină
Poți să te distrezi puțin mai mult cu lucrurile odată ce efectul principal este pus la punct. De exemplu, putem adăuga un pic de estompare în partea de sus a ecranului pentru a accentua efectul textului care se târăște la distanță:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Adăugați acel element în partea de sus a codului HTML și textul va curge în spatele unui gradient care trece de la transparent la același fundal ca :
Exemplul complet
Iată codul complet din această postare adunat.
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); ) )Alte exemple
Unii alți oameni au făcut versiuni mai fidele ale deschiderii Războiului Stelelor folosind alte tehnici decât cele prezentate aici în această postare.
Tim Pietrusky are o versiune frumos orchestrată folosind toppentru mișcare și opacitypentru a crea efectul de estompare:
Vedeți deschiderea cu crawlere a Pen Star Wars din 1977 de Tim Pietrusky (@TimPietrusky) pe CodePen.
Yukulélé folosește marginpentru a deplasa ecranul:
Vedeți crawl-ul de deschidere Pen Pure CSS Star Wars de Yukulélé (@yukulele) pe CodePen.
Karottes folosește la transformfel ca acest post, dar se bazează mai mult pe TranslateYmutarea textului de-a lungul Y-axis.
Vedeți Pen Star Wars Crawl de Karottes (@Karottes) pe CodePen.