Faça efeitos de tipografia 3D interativos

A tipografia sempre desempenhou uma parte importante no arsenal de ferramentas de qualquer designer, como eles selecionam o tipo de letra correto que irá melhorar a mensagem e apresentar o contexto correto para o que está sendo comunicado. Nos últimos oito anos, os web designers tiveram a capacidade de trazer Typefaces personalizados tal como Tipografia cinética para o design deles e ter um controle tipográfico semelhante àqueles desfrutados por designers de impressão.

Dê uma olhada em muitos dos sites que são apresentados como premiados ou recebendo os títulos 'Site of the Day' e você notará em breve que seu uso de tipografia se torna central para o design, permitindo que eles aumentem acima de sua concorrência. Isso pode variar de formulários de carta animados, movimento reativo para as interações do usuário, para o uso negrito de formulários de tipo que tomam o centro do centro (mantenha seus arquivos de tipografia seguros em armazenamento na núvem ).

Se você quiser criar um site de agarramento de atenção com zero barulho, tente um Construtor de sites também. E certifique-se de que o desempenho do seu site seja otimizado com o topo hospedagem na web. .

• Fontes 3D: 9 Dicas de Tipo Top

Neste tutorial, o efeito do tipo usará as formas das letras como uma máscara para algumas trilhas de partículas rápidas e fluentes que reverenciarão dinamicamente e passarão pelas letras. Não só haverá essa bela animação, mas como isso será renderizado no Canvas HTML5. Elemento, isso será transformado em 3D para girar para o mouse enquanto se move ao redor da tela. Isso é perfeito para cabeçalhos de site ou apenas quando você precisa pegar a atenção do usuário para uma chamada à ação.

Baixe os arquivos do tutorial aqui

01. Inicie o processo

Abra a pasta 'Iniciar' a partir dos arquivos do projeto em seu código IDE. O projeto vai começar criando a classe de objeto de partículas. Isso será usado para criar as imagens de fluxo dentro do texto no projeto. Abra o arquivo 'sketch.js' e adicione a seguinte variável para começar a criar a partícula de base.

 partículas de função () {
  this.pos = CreateVector (aleatório (largura), aleatório ((altura - 100)));
  this.vel = CreateVector (0, 0);
  this.acc = CreateVector (0, 0);
  este.maxspeed = maxspeed;
  this.prevpos = this.pos.copy (); 

02. Atualize a partícula

Para mover a partícula, uma função de atualização será executada em cada quadro, isso funcionará a velocidade da partícula e a aceleração para a velocidade. A velocidade acabará por ser limitada por uma variável global que será adicionada posteriormente. A velocidade é adicionada à posição da partícula individual. Criando uma partícula, vários milhares serão criados na tela a qualquer momento.

 esta.update = função () {
  this.vel.add (este.Acc);
  this.vel.limit (este.maxspeed);
  this.pos.add (este.vel);
  this.acc.mult (0);
  } 

03. Vá com o fluxo

Para dar às partículas seu movimento de fluxo, um campo de fluxo gerado pelo ruído será seguido. A função criada aqui permite que o vetor de fluxo seja passado e ele será seguido, portanto, o nome dessa função. A força da direção do vetor será aplicada à partícula.

 esta.follow = função (vetores) {
  var x = chão (this.pos.x / scl);
  var y = chão (this.pos.y / scl);
  var index = x + y * cols;
  Var Force = Vectores [Index];
  este.Applyforce (força);
  } 

04. Siga, mas não muito de perto

Para impedir que todas as partículas se juntem, o que pode facilmente acontecer com esse tipo de movimento, as partículas terão uma quantidade muito pequena de aleatoriedade adicionada à sua posição. Isso fará com que uma pequena quantidade de dispersão ocorra.

 esta.scatter = função (vetores) {
  this.pos.x + = aleatório (-0,9, 0,9);
  this.pos.y + = aleatório (-0,9, 0,9);
  }
  esta.applyforce = função (força) {
  this.acc.add (força);
  } 

05. Exiba a partícula

A função Show aqui exibe a partícula. A primeira coisa que é adicionar um golpe de pixel de uma cor cinza clara para criar a linha. A linha é tirada de sua posição atual para sua última posição no quadro anterior. A posição anterior é armazenada para a próxima vez através do loop.

 esta.show = função () {
  acidente vascular cerebral (180);
  pesado (1);
  linha (this.pos.x, this.pos.y, this.prevpos.x, this.prevpos.y);
  este.updateprev ();
  }
  this.updateprev = função () {
  this.prevpos.x = this.pos.x;
  this.prevpos.y = this.pos.y;
  } 

06. Enrole ao redor.

A função das bordas funciona se a partícula atinge a borda da tela e, em caso afirmativo, envolva-a para vir no lado oposto. Esta seção lida com a posição X para que ela seja detectada se for maior que a largura da tela, enviando-a para a borda esquerda e vice-versa.

 esta.edges = função () {
  if (this.pos.x & gt; largura) {
  this.pos.x = 0;
  este.updateprev ();
  }
  if (this.pos.x & lt; 0) {
  this.pos.x = largura;
  este.updateprev ();
  } 

07. Delícia do invólucro

Este código é o restante da detecção de borda e detecta a partícula no eixo Y para a parte superior e inferior da tela. Os suportes aqui enfrentam toda a turma de partículas. Isso significa usar esta classe, muitas partículas podem ser criadas.

 se (this.pos.y & gt; altura) {
  this.pos.y = 0;
  este.updateprev ();
  }
  if (this.pos.y & lt; 0) {
  this.pos.y = altura;
  este.updateprev ();
  }
  }
} 

08. Faça muitas partículas

Agora, como a partícula é criada, é hora de pensar em fazer muitas partículas. Para fazer isso, todo nosso código pode ir acima da classe de função de partículas. Aqui, várias variáveis ​​globais são declaradas para permitir que o sistema seja executado. Eles serão chamados em vários momentos durante o código, então eles podem ser explorados.

 var inc = 0.1;
var scl = 100, zoff = 0;
var cols, linhas, movimento = 0;
var partículas = [];
var fluemfield;
var img;
var maxspeed;
var t, calcX = 0, calcy = 0, currx = 0, curry = 0, targetx = 0, targety = 0; 

09. Defina tudo

A função de configuração, declarada aqui, define como a tela vai olhar para o início. A primeira detecção que está sendo feita é ver qual é a largura da tela. Se for relativamente grande, uma grande imagem é carregada, a tela é criada e isso é dimensionado por meio do CSS para caber dentro do visor.

 Configuração da função () {
  if (windowwidth & gt; 1200) {
  img = loadImage ("ativos / studio.png");
  Var Lona = Createcanvas (1920, 630);
  MaxSpeed ​​= 10,5;
  } 

10. Outras telas

O restante da declaração if verifica resoluções de tela diferentes e carrega uma imagem mais apropriada para esse tamanho da tela. Elementos de lona similarmente diferentes são criados. Isto é principalmente para parar um celular lidando com mais pixels do que ele.

 else if (windowwidth & gt; 900) {
  img = loadImage ("Ativos / Studio-Tablet-Wide.png");
  Var Canvas = Createcanvas (1200, 394);
  scl = 60;
  MaxSpeed ​​= 7;
  } outro {
  img = loadImage ("Ativos / Studio-Tablet-Tall.png");
  varona var = createcanvas (700, 230);
  SCL = 40;
  MaxSpeed ​​= 5;
  } 

11. Faça uma grade

Uma vez que o tamanho da tela é resolvido, a tela é colocada dentro da tag Div do cabeçalho na página Index.html. Uma série de colunas e linhas são trabalhadas com base na largura e altura; É um pouco como uma grade invisível. Finalmente, uma matriz é definida para o campo de fluxo.

 canvas.Parent ('cabeçalho');
cols = chão (largura / scl);
linhas = piso (altura / SCL);
Flowfield = nova matriz (cols); 

12. Faça partículas

O número de partículas é configurado com base na largura da tela - se a tela for 1920 pixels de largura, então 2500 partículas serão criadas e ela se move para baixo a partir daí. A para loop cria as novas partículas. A cor de fundo da tela é definida para quase cheia branca.

 Var Numparticles = matemática ((2500/1920) * largura);
  para (var i = 0; i & lt; numparticles; i ++) {
  partículas [i] = nova partícula ();
  }
  fundo (245);
} 

13. Desenhe a tela

Os resultados de todos os cálculos são desenhados na tela Cada quadro na função Draw. Em primeiro lugar, um retângulo cinza claro com uma opacidade muito baixa preenche a tela para desvanecer o que foi desenhado anteriormente. Depois disso é desenhado, o preenchimento é desligado à medida que as partículas serão compostas de traços não preenchidos.

 Função Draw () {
  narrage ();
  Preencha (245, 10);
  rect (0, 0, largura, altura);
  Sem preenchimento();
  var yoff = 0; 

14. Crie um efeito de fluxo

Para obter o efeito de fluxo, há duas loops 'para', movendo-se pelas linhas e colunas para atualizar os valores de ruído. Estes são então alterados em ângulos do valor de ruído pronto para atualizar as partículas para cada uma das posições na tela.

 para (var y = 0; y & lt; linhas; y ++) {
  var xoff = 0;
  para (var x = 0; x & lt; cols; x ++) {
  var index = (x + y * cols);
  Var ângulo = ruído (Xoff, yoff, zoff) * dois_pi * 4;
  var v = p5.vector.Fromangle (ângulo); 

15. Atualize a matriz

A matriz do fluxo é atualizada com o ângulo e os valores são aumentados para que o deslocamento de cada posição seja aumentado a cada vez que suba. Isso pode parecer complicado, mas isso realmente cria movimento de fluxo aleatório para as partículas seguirem na tela.

 v.setmag (1);
  Flowfield [Index] = v;
  Xoff + = Inc;
  }
  yoff + = inc;
  Zoff + = 0,001;
  } 

16. Atualize as partículas

Agora as partículas estão todas enroladas em sua matriz. Cada partícula individual é dita para seguir o campo de fluxo, para atualizar, verifique as bordas da tela, dispersão ligeiramente e finalmente seja desenhada na tela usando a função Mostrar. Salve o arquivo e teste o 'index.html' para ver as partículas se movendo.

 para (var i = 0; i & lt; partículas.Length; i ++) {
  partículas [i] .follow (fluxo de fluxo);
  partículas [i] .update ();
  partículas [i] .ges ();
  partículas [i] .Scatter ();
  partículas [i] .Show ();
  }
} 

17. Adicione o texto

O texto é uma máscara que é colocada por cima. Para fazer isso, a imagem correta é colocada por cima das partículas. Adicione este código antes da cinta de fechamento da função Draw. Salve e verifique o navegador para ver o efeito funcionando com o texto agora.

 Imagem (IMG, 0, 0); 

18. Detectar a posição do mouse

A posição do mouse é referenciada e os valores X e Y são mapeados em ângulos de grau que podem ser movidos. No eixo Y, este será -25 a 25 e vice-versa para o eixo X. O código restante deve ser colocado após o último código foi adicionado antes do final da função Desenhar.

 targety = math.round (mapa (MOUSEX, 0, largura, -25, 25));
targetx = math.round (mapa (mousey, 0, altura, 25, -25)); 

19. Facilidade no lugar

A posição alvo agora é dada um pouco de facilitação para que os graus atinjam lentamente seu alvo. Isso é criado usando um algoritmo de facilitação clássico de tirar a posição atual do destino e multiplicando por um número baixo.

 var VX = (TargetX - Currx) * 0,05;
var vy = (targety - curry) * 0,05;
calcX + = vx;
Calcy + = vy; 

20. Escreva o CSS

A variável 'T' aqui leva os valores calculados e coloca-os em uma cadeia de CSS usando os valores de transformação de rotatex e girar. A posição atual é calculada a partir da posição que a tela é atualmente girada para.

 t = 'rotaratex (' + calcx + 'deg) girar (' + calcy + 'deg)';
Currx = Calcx;
Curry = Calcy; 

21. Termine Off.

Agora, o CSS é aplicado ao elemento de tela neste código. Salve a página e visualize isso no navegador. Agora o mouse atualiza plenamente a rotação da tela para que ela se vira à medida que o mouse se move. É claro que todas as partículas nesse espaço se movem com ela na tela.

 canvas.style.webkittransform = t;
canvas.style.mstransform = t;
canvas.style.transform = t; 

Este artigo foi originalmente publicado na revista Creative Web Design Web Designer. Comprar Edição 271. ou se inscrever .

Artigos relacionados:

• 70 melhores fontes gratuitas para designers
• 6 passos para a perfeita experiência de leitura online
• Ferramenta on-line gratuita mostra o que suas fontes podem fazer