De basis-CSS

De truc is om je een driedimensionale ruimte voor te stellen waar de tekst verticaal omhoog kruiptY-asen langs deZ-as. Dit wekt de indruk dat de tekst tegelijkertijd over het scherm schuift en van de kijker weg is.

Laten we eerst het document instellenzodat het scherm niet verschuifbaar is. We willen dat de tekst vanaf de onderkant van het scherm omhoog komt zonder dat de kijker kan scrollen en de tekst kan zien voordat deze binnenkomt. We kunnen gebruikenoverloop verborgenom dat te doen:

body { /* Dwing de body om het hele scherm te vullen */ width: 100%; hoogte: 100%; /* Verberg elementen die buiten de zichtbare ruimte stromen */ overflow: hidden; /* Zwarte achtergrond voor het scherm */ achtergrond: #000;}

Nu kunnen we verder gaan met het stylen van onzesterrenoorlogencontainer, het bovenliggende element voor onze demo:

.star-wars { /* Flexbox om het hele element op het scherm te centreren */ display: flex; rechtvaardigen-inhoud: centrum; /* Dit is een magisch getal gebaseerd op de context waarin dit fragment wordt gebruikt en beïnvloedt het perspectief */ height: 800px; /* Deze set stelt ons in staat om de tekst op een 3D-vlak te transformeren, en is enigszins een magisch getal */ perspectief: 400px; /* De rest is helemaal aan persoonlijke stijlvoorkeuren */ kleur: #feda4a; lettertypefamilie: 'Pathway Gothic One', schreefloos; lettergrootte: 500%; lettergewicht: 600; letterafstand: 6px; regelhoogte: 150%; text-align: rechtvaardigen;}

Vervolgens kunnen we stijlen toepassen op dekruipenelement. Nogmaals, dit element is belangrijk omdat het de eigenschappen bevat die de tekst transformeren en animeren.

.crawl { /* Positioneer het element zodat we de eigenschap top in de animatie kunnen aanpassen */ position: relative; /* Ervoor zorgen dat de tekst aan het begin en einde van de animatie volledig buiten beeld is */ top: -100px; /* Definieert de schuine oorsprong in het midden wanneer we transformaties toepassen op de animatie */ transformatie-oorsprong: 50% 100%;}

Tot nu toe hebben we een mooie hoeveelheid tekst, maar deze is niet scheef of geanimeerd. Laten we dat mogelijk maken.

Animatie!

Dit is waar je echt om geeft, toch? Eerst gaan we de definiëren@sleutelframesvoor de animatie. De animatie doet iets meer dan animeren voor ons, omdat we onze gaan toevoegentransformereneigenschappen hier, met name voor de beweging langs deZ-as. We beginnen de animatie om0%waar de tekst het dichtst bij de kijker staat en zich onder het scherm bevindt, uit het zicht, beëindig dan de animatie op100%waar het ver weg is van de kijker en omhoog en over de bovenkant van het scherm stroomt.

/* We noemen deze animatie "crawl" */@keyframes crawl { 0% { /* Het element begint onder het scherm */ top: 0; /* Roteer de tekst 20 graden maar houd hem dicht bij de kijker */ transform: rotationX(20deg) translateZ(0); } 100% { /* Dit is een magisch getal, maar gebruik een groot getal om ervoor te zorgen dat de tekst aan het einde volledig van het scherm af is */ top: -6000px; /* De rotatie aan het einde iets verhogen en de tekst ver weg van de kijker verplaatsen */ transform: rotationX(25deg) translateZ(-2500px); }}

Laten we die animatie nu toepassen op de.kruipenelement:

.crawl { /* Positioneer het element zodat we de eigenschap top in de animatie kunnen aanpassen */ position: relative; /* Definieert de schuine oorsprong in het midden wanneer we transformaties toepassen op de animatie */ transformatie-oorsprong: 50% 100%; /* Voegt de crawl-animatie toe, die gedurende één minuut wordt afgespeeld */ animatie: crawl 60s lineair;}

Leuke tijden met fijnafstemming

Je kunt wat meer plezier hebben met dingen als het hoofdeffect eenmaal op zijn plaats is. We kunnen bijvoorbeeld een kleine vervaging aan de bovenkant van het scherm toevoegen om het effect te accentueren van de tekst die in de verte wegkruipt:

.fade { positie: relatief; breedte: 100%; min-hoogte: 60vh; bovenaan: -25px; achtergrondafbeelding: lineair verloop (0 graden, transparant, zwart 75%); z-index: 1;}

Voeg dat element toe aan de bovenkant van de HTML en de tekst zal achter een verloop lopen dat van transparant naar dezelfde achtergrond gaat als de:

Het volledige voorbeeld

Hier is de volledige code van dit bericht bij elkaar gebracht.

 
 
 
Aflevering IV
 
 Een nieuwe hoop
 
 
Het is een periode van burgeroorlog. Rebellenruimteschepen, aanvallend vanuit een verborgen basis, hebben hun eerste overwinning behaald tegen het boosaardige Galactische rijk.
 
Tijdens het gevecht slaagden rebellenspionnen erin om geheime plannen te stelen voor het ultieme wapen van het rijk, de DEATH STAR, een gepantserde ruimtestation met genoeg kracht om een ​​hele planeet te vernietigen.
 
Prinses Leia wordt achtervolgd door de sinistere agenten van het rijk en racet naar huis aan boord van haar ruimteschip, bewaarder van de gestolen plannen die haar mensen kunnen redden en de vrijheid in de melkweg kunnen herstellen... 
 

lichaam { breedte: 100%; hoogte: 100%; achtergrond: #000; overloop: verborgen;}.fade { positie: relatief; breedte: 100%; min-hoogte: 60vh; bovenaan: -25px; achtergrondafbeelding: lineair verloop (0 graden, transparant, zwart 75%); z-index: 1;}.star-wars {weergave: flex; rechtvaardigen-inhoud: centrum; positie: relatief; hoogte: 800px; kleur: #feda4a; lettertypefamilie: 'Pathway Gothic One', schreefloos; lettergrootte: 500%; lettergewicht: 600; letterafstand: 6px; regelhoogte: 150%; perspectief: 400px; text-align: rechtvaardigen;}.crawl { positie: relatief; boven: 9999px; transformatie-oorsprong: 50% 100%; animatie: crawl 60s lineair;}.crawl > .title { lettergrootte: 90%; text-align: center;}.crawl > .title h1 { margin: 0 0 100px; text-transform: hoofdletters;}@keyframes crawl { 0% { top: 0; transformeren: roterenX(20graden) vertalenZ(0); } 100% { boven: -6000px; transformeren: roterenX(25graden) translateZ(-2500px); }}

Andere voorbeelden

Sommige andere mensen hebben meer getrouwe weergaven van de Star Wars-opening gemaakt met andere technieken dan degene die hier in dit bericht worden behandeld.

Team Pietruskyheeft een prachtig georkestreerde versie met behulp vanbovenkantvoor de beweging enondoorzichtigheidom het vervagende effect te creëren:

Zie de penStar Wars openingscrawl uit 1977door Tim Pietrusky (@TimPietrusky) opCodePen.

Ukeleletoepassingenmargeom de langs het scherm te verplaatsen:

Zie de penPure CSS Star Wars openingscrawldoor Yukulele (@yukulele) opCodePen.

wortelstoepassingentransformerenlijkt veel op dit bericht, maar vertrouwt meer opVertalenYom de tekst langs de te verplaatsenY-as.

Zie de penStar Wars-crawldoor Karottes (@wortels) opCodePen.