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.

Demo - Save from the browser to download it

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.