A abertura de Star Wars é icônica. O efeito do texto rolar para cima e para longe da tela era um efeito especial louco e legal para um filme de 1977 e um estilo tipográfico legal que era novo na época.
Podemos obter um efeito semelhante com HTML e CSS! Esta postagem é mais sobre como obter aquele efeito de texto deslizante, em vez de tentar recriar a sequência de abertura completa de Star Wars ou combinar os estilos exatos usados no filme, então vamos chegar a um ponto onde este é o resultado final:
Veja o Pen Star Wars Intro de Geoff Graham (@geoffgraham) no CodePen.
O HTML básico
Primeiro, vamos configurar o HTML para o conteúdo:
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…
Isso nos dá todas as peças de que precisamos:
- Um container chamado
star-warsque usaremos para posicionar o conteúdo. Isso também é necessário porque usaremos aperspectivepropriedade CSS, em que ter um elemento pai é uma maneira útil de adicionar profundidade ou distorcer atransformpropriedade de um elemento filho . - Um contêiner chamado
crawlque conterá o texto real e será o elemento ao qual aplicamos a animação CSS. - O conteúdo!
Você deve ter notado que o título do filme está empacotado em um contêiner extra chamado title. Isso não é necessário, mas pode fornecer opções de estilo adicionais, caso você precise.
O CSS Básico
O truque é imaginar um espaço tridimensional onde o texto rasteja verticalmente para cima Y-axise para fora ao longo do Z-axis. Isso dá a impressão de que o texto desliza para cima na tela e para longe do visualizador ao mesmo tempo.
Primeiro, vamos configurar o documento para que a tela não seja rolável. Queremos que o texto apareça da parte inferior da tela sem que o visualizador seja capaz de rolar e ver o texto antes de entrar. Podemos usar overflow: hiddenpara fazer isso:
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; )Agora podemos prosseguir para estilizar nosso star-warscontêiner, que é o elemento pai de nossa demonstração:
.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; )Em seguida, podemos aplicar estilos ao crawlelemento. Novamente, esse elemento é importante porque contém as propriedades que transformarão o texto e serão animados.
.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%; )Até agora, temos um monte de texto bonito, mas não está inclinado nem animado. Vamos fazer isso acontecer.
Animação!
É com isso que você realmente se preocupa, certo? Primeiro, vamos definir o @keyframespara a animação. A animação está fazendo um pouco mais do que animar para nós, porque vamos adicionar nossas transformpropriedades aqui, principalmente para o movimento ao longo do Z-axis. Começaremos a animação 0%onde o texto está mais próximo do visualizador e está localizado abaixo da tela, fora da visualização, e então terminaremos a animação 100%onde ele está longe do visualizador e fluindo para cima e sobre o topo da tela.
/* 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); ) )Agora, vamos aplicar essa animação ao .crawlelemento:
.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; )Momentos divertidos com ajuste fino
Você pode se divertir um pouco mais com as coisas assim que o efeito principal estiver ativado. Por exemplo, podemos adicionar um pequeno esmaecimento na parte superior da tela para acentuar o efeito do texto rastejando para longe:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Adicione esse elemento ao topo do HTML e o texto fluirá atrás de um gradiente que vai de transparente para o mesmo fundo que :
O Exemplo Completo
Aqui está o código completo desta postagem reunido.
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); ) )Outros Exemplos
Algumas outras pessoas fizeram interpretações mais fiéis da abertura de Star Wars usando outras técnicas do que as cobertas aqui neste post.
Tim Pietrusky tem uma versão lindamente orquestrada usando toppara o movimento e opacitypara criar o efeito de desbotamento:
Veja o rastreamento de abertura de Pen Star Wars de 1977 por Tim Pietrusky (@TimPietrusky) no CodePen.
Yukulélé usa marginpara mover o ao longo da tela:
Veja o rastreamento de abertura de Pen Pure CSS Star Wars por Yukulélé (@yukulele) no CodePen.
Karottes usa transformmuito como este post, mas depende mais TranslateYpara mover o texto ao longo do Y-axis.
Veja o Pen Star Wars Crawl de Karottes (@Karottes) no CodePen.