Uma das aberturas mais memoráveis do cinema foi a do filme Star Wars com seu texto "scrolling" com perspectiva de 30-45 graus em direção ao horizonte. É um clássico que já foi usado em vários exercícios e tutoriais. Eu nunca fiz nada relacionado ao efeito, mas semana passada enquanto brincava com CSS me inspirei e resolvi criar o efeito para o meu site pessoal. E o resultado é o que quero compartilhar com vocês. A única coisa faltando é a música tema, então fique a vontade para colocar a música no seu efeito.
No tutorial de hoje vou mostrar para vocês o processo de criação do efeito dos créditos de abertura do Star Wars usando apenas CSS e CSS animations. Usei Javascript para outros detalhes, mas o efeito de texto "rolling"é apenas CSS.
Passo 1
A primeira coisa a fazer é pegar o conteúdo da sua página HTML. Eu usei o conteúdo da minha página pessoal. O site tem basicamente um cabeçalho uma seção para o texto. Abaixo você pode conferir o HTML final.
Passo 2
Agora vamos começar a adicionar estilo ao design. Precisamos garantir que o background seja preto, a fonte é San-Serif e vamos usar 100% de height e width. Também vamos ajustar a perspectiva do nosso design. Para fazer isso vamos adicionar "-webkit-perspective:300" to the "section" tag.
Passo 3
Agora vamos adicionar o texto. Eu coloquei o texto em uma tag "article" e usei a tag "P" para cada parágrafo. Para fazer o texto de movimentar na perspectiva vamos girar a tag "article". Depois podemos mover o parágrafo na posição Y via "translate". Aqui está o CSS.
Passo 4
Para mover o texto para fora da tela vamos usar "TranslateY" nos parágrafos.
Passo 5
Agora vamos criar a animação. Abaixo você pode ver o código, é basicamente mover os parágrafos no eixo Y de baixo para cima da tela.
Passo 6
Depois de criar a animação Keyframe nós precisamos apenas atribuí-la ao elemento que queremos animar. No nosso caso, o "article p" ou os parágrafos dentro da tag "article". A animação vai durar 70 segundos e terá 3s de atraso. O timing vai ser linear para manter a animação na mesma velocidade do começo ao fim.
Conclusão
A animação está pronta, agora você pode adicionar outros elementos na sua composição, como estrelas ou o seu logo. Abaixo você pode ver o resultado final e você também pode fazer o download dos arquivos para deixá-los com seu toque.