Código de digitação de animações de texto com jQuery TypeIt

o combo de jQuery e texto não tem limites na web. Você pode construir quase tudo com um pouco de criatividade e as bibliotecas corretas do JavaScript.

Uma dessas bibliotecas é Digite, construído como um plugin jQuery livre. Permite criar animações de digitação dinâmicas que parecem incrivelmente realistas. Você pode até mesmo definir pausas personalizadas entre os pressionamentos de tecla para criar seu próprio atenuador para a animação.

TypeIt é 100% gratuito e de código aberto, construído como um ferramenta de texto para a comunidade jQuery. Toda a documentação está disponível on-line e incrivelmente fácil de seguir.

No entanto, apenas note que, enquanto TypeIt vem com um licença pessoal gratuita, licenças comerciais, infelizmente, custam dinheiro. Mas você pode usar a licença pessoal gratuita para sempre e nunca expira, por isso é um ótimo recurso para todos os seus projetos pessoais ou até mesmo seu site pessoal.

Você pode começar por adicionando o arquivo JavaScript TypeIt bruto via CDN direito ao cabeçalho da sua página. Em seguida, adicione jQuery, escreva algum texto e conecte tudo junto. Simples!

Normalmente, você segmentar um div específico na página e usá-lo como um contêiner para a animação de texto. Aqui está um snippet de código de amostra para mostrar como isso funciona:

 $ ('. type-it'). typeIt (strings: ['Esta é a minha string!']); 

Por passando opções personalizadas ao Digite() função, você pode diminuir a velocidade de digitação, adicionar pausas em determinados intervalos, e até mesmo redefinir as configurações em determinados intervalos para alterar a velocidade de digitação mid-animação.

Você também pode testar essas opções na página do plugin, se você estiver disposto a gastar algum tempo brincando com as configurações.

Este construtor de animação de texto é o exemplo perfeito do que você pode fazer com este plugin. Você tem tantas opções personalizadas que você pode até criar um aplicativo da web, usando este plugin, para crie animações dinamicamente!

Na página principal do plugin, você também encontrará opções mais avançadas na parte inferior com trechos de código que você pode copiar.

Então, baixe TypeIt e dê uma chance! Uma vez que você trabalha, é muito divertido. E, se você tiver dúvidas ou sugestões para o desenvolvedor, você pode se conectar com ele no Twitter @amacarthur.