Criando uma Animação CSS Estilo Terminal
No mundo do desenvolvimento web, a criatividade não tem limites. Às vezes, são os pequenos detalhes que fazem um site se destacar. Neste post, vamos levá-lo a uma jornada pelo processo de criação de uma animação CSS estilo terminal, completa com um efeito de digitação e um cursor piscante. Essa animação chamativa pode ser uma adição única ao seu site. Vamos lá!
Planejando a Animação
Antes de começarmos a codificar, é essencial planejar nossa animação. Queremos simular a execução dos comandos whoami
e pwd
em um terminal. Aqui está o que precisamos fazer:
- Simular a digitação do comando
whoami
caractere por caractere. - Exibir o resultado do comando
whoami
. - Simular a digitação do comando
pwd
caractere por caractere. - Exibir o resultado do comando
pwd
.
Estrutura HTML
Nossa estrutura HTML será simples. Criaremos um elemento div
para o prompt do terminal e, dentro dele, usaremos elementos span
para representar o texto digitado. Aqui está um trecho do HTML:
<nav class="nav-top"> <!-- Outros itens de navegação --></nav>
<div class="terminal__prompt--typing"> <div class="cover cover--whoami"></div>whoami</div><div class="terminal__prompt--whoami-return"> <span> <a href="/">Calebe94</a> </span></div>
<!-- Outro conteúdo -->
<h5> <div class="terminal__prompt--pwd"> $<span class="terminal__prompt--typing"> <div class="cover cover--pwd"></div>pwd </span> </div> <div class="terminal__prompt--pwd-return"> <span>/<a href="/">home</a>/</span> </div></h5>
CSS para a Animação de Digitação
A magia da nossa animação está nos keyframes do CSS. Definimos dois keyframes: um para digitar o texto caractere por caractere e outro para fazer o cursor piscar. Aqui está o código CSS:
/* Animação de digitação para whoami */@keyframes typing-whoami { 0% { width: 100%; opacity: 1; } 12% { width: 0; } 15% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; }}
/* Animação de cursor piscante */@keyframes blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; }}
Colocando Tudo Junto
Para aplicar a animação de digitação e o cursor piscante aos nossos elementos HTML, usamos animações CSS. Anexamos as animações aos elementos apropriados. Aqui está como é feito:
/* Aplicando a animação de digitação para whoami */.terminal__prompt--typing .cover--whoami { animation: typing-whoami 10s steps(6, end) 1 normal both;}
/* Aplicando a animação de cursor piscante para whoami */.terminal__prompt--whoami-return { animation: show-whoami-return 10s 1 normal both;}
/* Aplicando a animação de digitação para pwd */.terminal__prompt--typing .cover--pwd { animation: typing-pwd 10s steps(3, end) 1 normal both;}
/* Aplicando a animação de exibição do resultado para pwd */.terminal__prompt--pwd-return { animation: show-pwd-return 10s 1 normal both;}
Projetos semelhantes
Se você ficou interessado na criação de animações de estilo terminal, você também pode explorar esses projetos e recursos relacionados:
-
Typewriting.js Um exemplo de animação de digitação de texto no estilo terminal usando JavaScript. Ver projeto
-
Retro Terminal Blog Style Um blog post que explora a criação de um estilo retrô de terminal para seu blog. Ver post
-
Typing Window Um tutorial sobre como criar uma janela de digitação de texto com efeito de terminal. Ver tutorial
-
CSS Tricks - Typewriter Effect Um snippet que demonstra como criar um efeito de máquina de escrever usando apenas CSS. Ver exemplo
-
Terminal Animation for Your Website using Typed.js Um guia sobre como adicionar animações de terminal ao seu site usando Typed.js. Ver guia
-
Typed.js Uma biblioteca JavaScript popular para criar animações de digitação de texto em seu site. Ver projeto
-
Terminal Animation (CodePen) Um exemplo de animação de terminal em um ambiente interativo do CodePen. Ver exemplo
-
Termynal Uma biblioteca JavaScript para criar animações de terminal em seu site com facilidade. Ver projeto
Explorar esses recursos adicionais pode fornecer mais insights e opções para adicionar animações de terminal ao seu projeto ou inspirar novas ideias criativas.
Conclusão
Nesta jornada de criação de uma animação CSS estilo terminal, exploramos o poder dos keyframes e das animações CSS. Ao planejar meticulosamente e aplicar nossas animações aos elementos certos, conseguimos simular com sucesso a execução dos comandos whoami
e pwd
em um terminal.
Lembre-se de que o desenvolvimento web é tudo sobre criatividade, e pequenos detalhes como este podem fazer o seu site se destacar. Portanto, vá em frente e experimente as animações CSS para adicionar aquele toque extra aos seus projetos web. Feliz codificação!
Sinta-se à vontade para adaptar este post ao seu site, adicionar mais detalhes e incluir quaisquer insights adicionais ou desafios que você enfrentou durante a criação da sua animação estilo terminal. Boa sorte!