Em um mundo digital repleto de informações, captar a atenção dos usuários é um desafio constante. Uma técnica visual bastante utilizada em sites corporativos e portfólios é o efeito de números aumentando gradualmente, geralmente para destacar métricas importantes, como a quantidade de clientes, projetos realizados ou outras estatísticas que impressionam o visitante. Este efeito dinâmico é uma maneira eficaz de transformar números estáticos em elementos interativos, criando uma experiência visual mais rica e atraente.
Neste post, vamos explorar como implementar esse efeito de números crescendo utilizando JavaScript, uma ferramenta poderosa e flexível que permite dar vida a páginas web com animações simples e eficientes.
Onde Usar o Efeito de Números Crescendo?
O efeito de números crescendo é amplamente utilizado em sites que exibem "big numbers" ou números impressionantes que representam conquistas da empresa. É comum encontrá-lo em páginas de "Sobre nós", "Nossa história" ou "Portfólio". Empresas de tecnologia, startups, agências de marketing e consultorias frequentemente utilizam este recurso para exibir, por exemplo:
- Número de clientes atendidos
- Projetos concluídos
- Usuários ativos
- Downloads de aplicativos
- Horas de serviço prestadas
Este efeito não só embeleza o design do site, mas também ajuda a enfatizar marcos importantes, criando uma impressão duradoura nos visitantes.
Como Criar o Efeito de Números Crescendo com JavaScript
Agora, vamos à prática! Implementar o efeito de números crescendo com JavaScript é bastante simples. Vamos construir um exemplo básico para ilustrar o processo.
Passo 1: Estrutura HTML
Primeiro, crie um elemento HTML onde o número será exibido. Pode ser um <div>, <span> ou qualquer outro contêiner.
<div id="counter" data-target="1000">0</div>
Aqui, data-target define o valor final que o contador deve atingir, e 0 é o valor inicial que será atualizado.
Passo 2: Estilo CSS
Embora o foco seja no JavaScript, um pouco de estilo não faz mal. Vamos centralizar o contador e aumentar sua fonte para destacá-lo.
#counter {
font-size: 2em;
font-weight: bold;
text-align: center;
margin: 50px 0;
}Passo 3: Script JavaScript
Agora, o código JavaScript que faz a mágica acontecer. Este script vai capturar o valor inicial do contador, calcular o incremento e atualizar o número gradualmente até atingir o valor final.
document.addEventListener("DOMContentLoaded", () => {
const counter = document.getElementById('counter');
const target = +counter.getAttribute('data-target');
const speed = 200; // velocidade da animação, quanto menor o número, mais rápido
const updateCount = () => {
const currentCount = +counter.innerText;
const increment = target / speed;
if (currentCount < target) {
counter.innerText = Math.ceil(currentCount + increment);
setTimeout(updateCount, 10);
} else {
counter.innerText = target;
}
};
updateCount();
});Explicando o Código
- target: Este é o valor final que queremos atingir, extraído do atributo data-target.
- speed: Define a velocidade da animação. Ajuste esse valor conforme necessário.
- updateCount(): Essa função calcula o próximo valor do contador e o atualiza a cada 10ms até que o valor final seja atingido.
Passo 4: Adicionando Mais Contadores
Se precisar de vários contadores na página, você pode modificar o código para selecionar todos os elementos com um determinado seletor e aplicar a animação a cada um:
document.addEventListener("DOMContentLoaded", () => {
const counters = document.querySelectorAll('.counter');
const speed = 200;
counters.forEach(counter => {
const updateCount = () => {
const target = +counter.getAttribute('data-target');
const currentCount = +counter.innerText;
const increment = target / speed;
if (currentCount < target) {
counter.innerText = Math.ceil(currentCount + increment);
setTimeout(updateCount, 10);
} else {
counter.innerText = target;
}
};
updateCount();
});
});Agora, basta aplicar a classe .counter nos elementos que deseja animar.
Conclusão
O efeito de números aumentando com JavaScript é uma técnica simples, mas que pode causar um grande impacto na apresentação de informações em seu site. Além de destacar conquistas e números importantes, ele adiciona uma camada de interatividade que pode prender a atenção do usuário por mais tempo.
Com apenas algumas linhas de código, você pode transformar um número estático em um elemento dinâmico, tornando seu site mais moderno e envolvente. Experimente implementá-lo em seu próximo projeto e veja como ele pode melhorar a experiência do usuário!
Sugestão de Cursos
Descubra o caminho para se tornar um especialista em programação web. Aprenda HTML, CSS, JavaScript e os principais frameworks nesta jornada emocionante. Com instrutores experientes e materiais práticos, você desenvolverá habilidades práticas para criar sites impressionantes e aplicativos interativos. Impulsione sua carreira na indústria de tecnologia e abra portas para oportunidades de emprego lucrativas. Garanta sua vaga hoje mesmo e inicie sua jornada para se tornar um desenvolvedor web de sucesso.
Método Para Aprender a Programar do Absoluto ZERO com Node.js, React e React Native.
As tecnologias ensinadas no curso são responsáveis por muitas vagas no mercado de trabalho.
Além da alta demanda, os salários vão de R$47.000,00 até R$197.000,00 anuais tendo empresas que possibilitam o trabalho remoto e até vagas Internacionais.
Para que você possa estar apto a preencher uma dessas vagas eu vou te apresentar o passo a passo para você se tornar um verdadeiro expert nessas tecnologias.
O curso te dará o passo a passo de como criar estruturar de um sistema do zero com Node.js, React e React Native.