Contente
- 01. Inicie o documento HTML
- 02. Conteúdo HTML visível
- 03. iniciação CSS
- 04. Contêiner de animação
- 05. Iniciação de animação
- 06. Animar para a vista
- 07. Finalizando a animação
Love Lost by Canada’s Jam3 é um poema interativo lindamente sombrio e pronto para dispositivos móveis com verdadeiro coração sobre os sentimentos duradouros em torno do amor perdido. O layout do site foi construído usando HTML5 com a biblioteca GSAP alimentando sua animação, um de seus recursos mais visualmente impressionantes é seu texto 3D animado que realmente dá vida à poesia de Love Lost.
- Faça efeitos de tipografia 3D interativos
Parece muito impressionante e não é difícil incorporar ao seu próprio trabalho para criar uma experiência de usuário envolvente; aqui está como isso é feito.
Quer fazer seu próprio site envolvente? Experimente uma ferramenta de criação de sites e mantenha tudo funcionando perfeitamente escolhendo o serviço de hospedagem na web correto.
01. Inicie o documento HTML
A primeira etapa é definir a estrutura do documento HTML. Isso inclui o contêiner HTML que inicia o documento, que contém as seções de cabeçalho e corpo. Embora a seção head seja usada principalmente para carregar o arquivo CSS externo, a seção body armazenará o conteúdo visível da página criado na etapa 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 AQUI / body> / html>
02. Conteúdo HTML visível
O conteúdo HTML visível consiste em um contêiner de artigo que contém o texto visível. A parte importante do contêiner do artigo é o atributo 'data-animate', que será referenciado pelo CSS para aplicar os efeitos visuais. O texto dentro do artigo é feito de uma tag h1 para indicar que o conteúdo é o título principal da página.
artigo data-animate = "move in"> h1> Hello There! / h1> / article>
03. iniciação CSS
Crie um novo arquivo chamado 'styles.css'. O primeiro conjunto de instruções define o contêiner HTML da página e o corpo para ter um fundo preto, bem como nenhum espaçamento de borda visível. O branco também é definido como a cor de texto padrão para todos os elementos filho na página herdarem; evitando a cor preta padrão do texto, fazendo com que o conteúdo pareça invisível.
html, corpo {plano de fundo: # 000; preenchimento: 0; margem: 0; cor: #fff; }
04. Contêiner de animação
O contêiner de conteúdo referenciado com o atributo 'data-animate' tem estilos específicos aplicados. Seu tamanho é definido para corresponder ao tamanho total da tela usando unidades de medida vw e vh, além de ser ligeiramente girado. Uma animação chamada 'moveIn' é aplicada, que durará por uma duração de 20 segundos e se repetirá infinitamente.
[data-animate = "mover para dentro"] {posição: relativa; largura: 100vw; altura: 100vh; opacidade: 1; animação: moveIn 20s infinito; alinhamento de texto: centro; transformar: girar (20deg); }
05. Iniciação de animação
A animação 'moveIn' referenciada na etapa anterior requer uma definição usando @keyframes. O primeiro quadro começando em 0% da animação define o tamanho da fonte padrão, o posicionamento do texto e a sombra visível. Além disso, o item é definido com opacidade zero para que seja inicialmente invisível - ou seja, exibido fora do campo de visão.
@keyframes moveIn {0% {font-size: 1em; esquerda: 0; opacidade: 0; sombra do texto: nenhum; } * * * PASSO 6 AQUI}
06. Animar para a vista
O próximo quadro é colocado em 10% por meio da animação. Este quadro define a opacidade para totalmente visível, resultando na animação do texto gradualmente.Além disso, várias sombras são adicionadas com valores de cor azuis e decrescentes para dar a ilusão de profundidade 3D ao texto.
10% {opacidade: 1; sombra do texto: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * PASSO 7 AQUI
07. Finalizando a animação
Os frames finais ocorrem em 80% e no final da animação. Eles são responsáveis por aumentar o tamanho da fonte e mover o elemento para a esquerda. Novas configurações também são aplicadas para que a sombra do texto seja animada, enquanto também esmaece o texto fora de vista dos quadros de 80% a 100%.
80% {tamanho da fonte: 8em; esquerda: -8em; opacidade: 1; } 100% {tamanho da fonte: 10em; esquerda: -10em; opacidade: 0; sombra de texto: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Observação: seja qual for o projeto em que você está embarcando, ter armazenamento em nuvem que possa lidar é essencial (nosso guia vai ajudar).
Este artigo foi publicado originalmente na edição 273 da revista de web design criativo Web Designer. Compre a edição 273 aqui ou inscreva-se no Web Designer aqui.
