Você não precisa de JavaScript para criar o efeito clássico de máquina de escrever. Aprenda como fazer isso apenas com CSS usando a função steps().

Cascading Style Sheets (CSS) já percorreu um longo caminho desde o seu início. Há coisas que são possíveis apenas com CSS que você talvez não conheça, graças à contínua evolução e aprimoramento da linguagem.

Um dos avanços mais notáveis ​​em CSS é o surgimento e o refinamento das funções CSS, que expandiram significativamente as capacidades e o poder de estilizar o conteúdo da web.

Qual é o efeito da máquina de escrever?

O efeito máquina de escrever é uma técnica de animação de texto que simula o processo de revelação progressiva do conteúdo, imitando o ato de digitar à medida que ele se desenrola diante dos olhos do espectador. Este efeito lembra as máquinas de escrever antigas, os primeiros terminais de computador ou Interfaces de linha de comando (CLIs).

O aparecimento gradual do texto acrescenta um elemento de suspense e intriga, incentivando o público a prestar muita atenção ao desenrolar da mensagem.

instagram viewer

Como funciona a função CSS steps()

As funções em CSS introduzem um nível de flexibilidade que antes era difícil de alcançar usando apenas estilos estáticos. O passos() function é uma função popular usada em animações CSS. Faz com que as animações pareçam estar avançando em etapas distintas e discretas, em vez de fazerem uma transição suave.

passos() é uma função de temporização de animação que aceita dois parâmetros. O primeiro parâmetro denota o número de etapas que você deseja que sua animação execute. O segundo parâmetro define o comportamento de cada etapa. A sintaxe para o passos() funções fica assim:

animation-timing-function: steps(n, direction)

No bloco de código acima, o passos() função tem dois parâmetros, a saber: n e direção. O direção parâmetro pode ser começar ou fim.

Configurando o direção para começar garante que a primeira etapa seja concluída assim que a animação começar. Considerando que, definir o direção para fim executará a última etapa quando a animação terminar. Para ilustrar a importância do passos() função, dê uma olhada no seguinte código HTML:

<divclass="container">
<div>div>
div>

O bloco de código acima define um recipiente div com um filho div. Se você quiser que o div filho deslize pela tela, use animações CSS como esta:

.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
 100% {
transform: translateX(100vw);
 }
}

O bloco de código acima utiliza o Regra @keyframes para definir uma animação nomeado caixa de movimento. Essa animação é então aplicada ao div filho, fazendo com que ele se mova suavemente pela tela em um loop infinito.

via GIPHY

Se você não gosta de animação suave e deseja obter um efeito "cortado", você pode usar o passos() funcionar assim:

div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}

Como você pode ver no GIF abaixo, incorporando o passos() A função com um valor de parâmetro 10 animará o div filho em etapas, em vez de uma animação suave. Quanto maior o número de etapas, menos instável parecerá sua animação.

via GIPHY

No exemplo acima, o direção parâmetro é fornecido. No entanto, se você omitir o direção, o navegador usará fim como o valor padrão para direção.

Criando o efeito de máquina de escrever

Agora que você entende como o passos() função funcionar, é hora de colocar em prática tudo o que você aprendeu. Crie uma nova pasta e dê a ela um nome apropriado. Nessa pasta, adicione um índice.htm arquivo para marcação e um estilo.css arquivo para estilo.

No índice.htm arquivo, adicione o seguinte código padrão:

html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<divclass="container">
<divclass="text">
 Lorem ipsum dolor sit amet consectetur 
 adipisicing elit. Reiciendis, tempore! 
div>
div>
body>
html>

O bloco de código acima define a marcação para um site HTML simples. Existe um recipiente div que contém outro div com algum texto fictício.

Animando o Texto

Abra o estilos.css arquivo e defina a largura do recipiente div para a largura de seu conteúdo.

.container{
width: fit-content;
}

A seguir, usando o @quadros-chave regra, defina uma animação que controle como a animação progride ao longo do tempo. Defina a largura como "0%" em 0%. No 100%, defina a largura como "100%" assim:

@keyframes type-text {
 0% {
width: 0%;
 }
 100% {
width: 100%;
 }
}

A seguir, selecione o elemento com o nome da classe texto e definir o transbordar propriedade para escondido. Isso garantirá que o texto permaneça oculto enquanto o efeito de digitação não for iniciado. Depois de fazer isso, certifique-se de que o texto permaneça em uma linha, definindo o espaço em branco propriedade para agorarap. Dê o texto classifique uma fonte monoespaçada e adicione uma borda vertical verde à direita do texto.

Esta borda dará a aparência de um cursor. Defina o apropriado tamanho da fonte e a animação propriedade para digite-texto. Por fim, adicione o passos() função para o função de tempo de animação.

.text {
overflow: hidden;
white-space: nowrap;
font-family: "CourierNew", Courier, monospace;
border-right: solid 10pxgreen;
font-size: 23px;
animation: type-textforwards 4s;
animation-timing-function: steps(40);
}

Ao executar o código no navegador, você deverá ver o seguinte:

via GIPHY

Se quiser um efeito de digitação mais longo, você pode ajustar a duração da animação e o número de etapas especificado no passos() função.

Dando vida ao cursor

O efeito da máquina de escrever está quase completo, embora falte um recurso, que é o cursor piscante. Lembre-se de que no último bloco de código, uma borda direita foi definida no texto para servir como cursor. Você pode adicionar uma animação a este cursor usando o @quadros-chave governar também.

@keyframes cursor-blink {
 0% {
border-color: transparent;
 }
 100% {
border-color: green;
 }
}

Após definir a animação personalizada, adicione o nome da animação ao animação propriedade no texto classe e defina a duração para 0,6 segundos.

.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}

Agora, ao executar o código, você verá um cursor piscando.

via GIPHY

O poder das funções CSS

As funções CSS revolucionaram a forma como os sites são construídos, oferecendo um kit de ferramentas notável para você como desenvolvedor. Essas funções versáteis permitem estilos e interações dinâmicas que antes eram reservadas para linguagens de script complexas.

De manipulações de cores a layouts responsivos, animações e transformações criativas, as funções CSS expandiram as possibilidades do web design. Com funções como calc() para cálculos flexíveis, linear-gradient() para fundos impressionantes e translate() para animações cativantes, você pode criar usuários visualmente atraentes e envolventes experiências.