Um efeito visual que sempre achei muito bacana foi o de digitação. Ver as palavras se formando na tela acabam ditando o tom da leitura e nos aproximam do texto de uma forma que é até difícil de explicar. Ficamos ansiosos, afinal, permanecemos a todo instante na expectativa de saber o que vem pela frente.

Muitas aplicações têm retomado essa técnica, principalmente aquelas que envolvem chatbots (aliás, se você se interessa pelo assunto, recomendo que veja os vídeos da última edição do 7Masters sobre chatbots – ficaram muito bons!). Para tornar a experiência de conversa a mais fiel possível à realidade – passando para o usuário a ideia de que ele realmente está conversando com um humano e não com uma máquina – este efeito é aplicado. E funciona muito bem!

Recentemente eu também quis me aventurar com esta técnica para o site da Code Prestige (confere lá pra ver como ficou), a minha pequena escola de programação. Para conseguir concretizar esse objetivo, acabei estudando uma série de algoritmos e bibliotecas que prometiam fazer isso. Para me resumir somente ao caso mais bacana, falarei sobre o T-Writer.

Versão em vídeo

Além das instruções que daremos abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!

Digitando com efeitos

Esta pequena biblioteca foi desenvolvida pelo engenheiro de software Christopher Cavalea, e hoje tem suas duzentas e pouco estrelas no GitHub. O mais bacana sobre este pacote é que ele não tem nenhuma dependência, ou seja, foi desenvolvida utilizando nada mais do que o bom e velho vanilla js. No final das contas, isso acaba se refletindo em performance, ponto em que muitas bibliotecas semelhantes falham miseravelmente.

Sua utilização é muito simples. O primeiro passo é importá-la para dentro do projeto. Para fazer isso, podemos usar o bom e velho gerenciador de pacotes do Node, o npm:

npm install t-writer.js --save

Feito isso, agora o importamos para dentro do módulo onde desejamos utilizá-lo. Para isso, usamos o mecanismo de módulos lá do ES6 (se você ainda não está familiarizado com todas as mudanças promovidas por esta versão da especificação, dê uma olhada aqui!).

import Typewriter from 't-writer.js'

O terceiro passo é instanciar o serviço. Como podemos ter vários efeitos em uma única tela (o que honestamente não me parece ser uma boa ideia), devemos criar uma instância dele, sempre indicando qual o elemento do DOM em que ele irá atuar. Além disso, também podemos passar algumas configurações sobre o funcionamento do efeito. Estes efeitos são:

const defaultOptions = {
  loop: false,
  animateCursor: true,
  blinkSpeed: 400,
  typeSpeed: 90,
  deleteSpeed: 40,
  typeSpeedMin: 65,
  typeSpeedMax: 115,
  deleteSpeedMin: 40,
  deleteSpeedMax: 90,
  typeClass: 'type-span',
  cursorClass: 'cursor-span',
  typeColor: 'black',
  cursorColor: 'black'
}

Importante reforçar que estas configurações já estão definidas assim por padrão. Ou seja, você só precisa alterar os valores daquelas propriedades em que o valor será diferente do já atribuído. No final das contas, a instanciação do T-Writer fica algo muito semelhante a isto:

// target element  <div class="tw"></div>

const target = document.querySelector('.tw');
const options = {
  loop: true
};
const writer = new Typewriter(target, options);

Por fim, apenas precisamos dizer ao objeto writer o que ele deve fazer. Há vários métodos disponibilizados na API do projeto que nos permite fazer uma série de coisas diferentes. Confira alguns exemplos destes métodos:

• type
• remove
• rest
• strings
• clear
• then
• queueClearText
• changeOps
• removeCursor
• addCursor
• changeTypeColor
• changeCursorColor
• changeTypeClass
• changeCursorClass

Com todas estas APIs disponíveis, conseguimos fazer muitas coisas legais como, por exemplo, com o código a seguir, conseguimos realizar o seguinte efeito:

const writer = new Typewriter(target, {
  loop: true,
  typeColor: 'blue'
})

writer
  .type('A simple syntax makes it easy.')
  .rest(500)
  .start()

Bem legal, né? Você pode ver todos os exemplos em tempo real clicando aqui.

Referências

• https://github.com/ChrisCavs/t-writer.js
• https://chriscavs.github.io/t-writer-demo/