L'apertura a Star Wars è iconica. L'effetto del testo che scorreva sia verso l'alto che verso l'esterno dallo schermo era sia un effetto speciale folle per un film nel 1977, sia uno stile tipografico fantastico che era nuovo di zecca all'epoca.
Possiamo ottenere un effetto simile con HTML e CSS! Questo post è più su come ottenere quell'effetto di testo scorrevole piuttosto che cercare di ricreare l'intera sequenza di apertura di Star Wars o di abbinare gli stili esatti usati nel film, quindi arriviamo a un punto in cui questo è il risultato finale:
Guarda l'introduzione di Pen Star Wars di Geoff Graham (@geoffgraham) su CodePen.
L'HTML di base
Innanzitutto, impostiamo l'HTML per il contenuto:
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…
Questo ci dà tutti i pezzi di cui abbiamo bisogno:
- Un contenitore chiamato
star-warsche useremo per posizionare il contenuto. Questo è anche necessario perché useremo laperspectiveproprietà CSS, dove avere un elemento genitore è un modo utile per aggiungere profondità o inclinare latransformproprietà di un elemento figlio . - Un contenitore chiamato
crawlche conterrà il testo effettivo e sarà l'elemento a cui applichiamo l'animazione CSS. - Il contenuto!
Avrai notato che il titolo del film è racchiuso in un contenitore aggiuntivo chiamato title. Questo non è necessario, ma potrebbe fornirti opzioni di stile aggiuntive se ne avessi bisogno.
Il CSS di base
Il trucco è immaginare uno spazio tridimensionale in cui il testo striscia verticalmente su Y-axise fuori lungo Z-axis. Ciò dà l'impressione che il testo scorra contemporaneamente verso l'alto sullo schermo e lontano dallo spettatore.
Per prima cosa, impostiamo il documento in modo che lo schermo non sia scorrevole. Vogliamo che il testo venga fuori dalla parte inferiore dello schermo senza che lo spettatore possa scorrere e vedere il testo prima che entri. Possiamo usare overflow: hiddenper farlo:
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; )Ora possiamo passare allo stile del nostro star-warscontenitore, che è l'elemento genitore della nostra demo:
.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; )Successivamente, possiamo applicare gli stili crawlall'elemento. Anche in questo caso, questo elemento è importante perché contiene le proprietà che trasformeranno il testo e saranno animati.
.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%; )Finora abbiamo un bel po 'di testo, ma non è né distorta né animata. Facciamolo accadere.
Animazione!
Questo è ciò che ti interessa davvero, giusto? Per prima cosa, definiremo il @keyframesper l'animazione. L'animazione sta facendo un po 'più che animare per noi, perché aggiungeremo le nostre transformproprietà qui, in particolare per il movimento lungo il Z-axis. Inizieremo l'animazione nel 0%punto in cui il testo è più vicino al visualizzatore e si trova sotto lo schermo, fuori dalla vista, quindi termineremo l'animazione nel 100%punto in cui è lontano dallo spettatore e scorre su e sopra la parte superiore dello schermo.
/* 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); ) )Ora, applichiamo quell'animazione .crawlall'elemento:
.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; )Momenti divertenti con messa a punto
Puoi divertirti un po 'di più con le cose una volta che l'effetto principale è a posto. Ad esempio, possiamo aggiungere una piccola dissolvenza nella parte superiore dello schermo per accentuare l'effetto del testo che striscia in lontananza:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Aggiungi quell'elemento all'inizio dell'HTML e il testo scorrerà dietro una sfumatura che va da trasparente allo stesso sfondo di :
L'esempio completo
Ecco il codice completo di questo post messo insieme.
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); ) )Altri esempi
Alcune altre persone hanno realizzato interpretazioni più fedeli dell'apertura di Star Wars usando altre tecniche rispetto a quelle trattate qui in questo post.
Tim Pietrusky ha una versione splendidamente orchestrata che utilizza topper il movimento e opacityper creare l'effetto dissolvenza:
Guarda il crawl di apertura di Pen Star Wars del 1977 di Tim Pietrusky (@TimPietrusky) su CodePen.
Yukulélé usa marginper spostare il simbolo lungo lo schermo:
Guarda il crawl di apertura di Pen Pure CSS Star Wars di Yukulélé (@yukulele) su CodePen.
Karottes usa transformmolto simile a questo post, ma fa più affidamento su TranslateYper spostare il testo lungo il Y-axis.
Guarda il Pen Star Wars Crawl di Karottes (@Karottes) su CodePen.