Quantcast
Channel: Abduzeedo - Design Inspiration and Tutorials
Viewing all articles
Browse latest Browse all 5330

Star Wars em CSS

0
0
Star Wars em CSS

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

Tags: 

Viewing all articles
Browse latest Browse all 5330

Latest Images

Trending Articles




Latest Images