Aprenda a criar uma animação de scroll horizontal infinito usando HTML, CSS e JavaScript e como implementá-la em seus projetos web.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Na aula de hoje, vou te ensinar a criar uma animação de scroll horizontal infinito usando HTML, CSS e JavaScript!
Esse é um excelente elemento visual que você pode integrar em diferentes projetos web, permitindo que elementos e informações importantes se repitam em looping na tela do seu site.
Vou te mostrar o passo a passo de como criar esses elementos no HTML, fazer a animação deles no CSS e duplicá-los utilizando o JavaScript!
No material disponível para download, você encontrará os arquivos com o gabarito do projeto desta aula.
Com esse gabarito, você poderá visualizar o funcionamento do scroll horizontal infinito que iremos desenvolver.
Ao longo desta aula, utilizaremos o VS Code e a extensão Live Server.
Essa extensão nos permite visualizar no navegador o resultado de todos os códigos que estivermos desenvolvendo dentro do VS Code.
Caso queira conferir como baixar, instalar e personalizar seu VS Code com as extensões utilizadas ao longo desta e de outras aulas de HTML e CSS aqui da Hashtag, confira esta aula aqui.
Antes de partirmos para a animação, precisamos criar os elementos e os itens que serão exibidos na página. Para isso, com o VS Code aberto, crie um arquivo chamado index.html, digite ! e pressione a tecla Tab.
O VS Code reconhecerá que você deseja criar um arquivo HTML e construirá toda a estrutura básica dele para você.
Dentro desse arquivo, vamos alterar o <title>, título do documento, para “Animação de Scroll Horizontal Infinito”.
Já no <body>, corpo da página, definiremos a nossa tag <main>, conteúdo principal, com uma <div> que terá a classe scroll.
Para compreender melhor cada uma dessas tags e seu uso, recomendo que confira a nossa aula sobre HTML e CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animação de Scroll Horizontal Infinito</title>
</head>
<body>
<main>
<div class="scroll"></div>
</main>
</body>
</html>Dentro dessa <div>, vamos ter uma nova <div> que será o container dos elementos que queremos adicionar ao scroll. Seguindo a convenção da metodologia BEM (Block Element Modifier) essa div receberá a classe scroll__container.
Nesse container, vamos definir os itens que serão exibidos no scroll horizontal. Cada um deles também será uma div com a classe scroll__item. E o conteúdo, no nosso exemplo, serão os nomes dos cursos da Hashtag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animação de Scroll Horizontal Infinito</title>
</head>
<body>
<main>
<div class="scroll">
<div class="scroll__container">
<div class="scroll__item">Excel</div>
<div class="scroll__item">Power BI</div>
<div class="scroll__item">VBA</div>
<div class="scroll__item">PowerPoint</div>
<div class="scroll__item">Python</div>
<div class="scroll__item">JavaScript</div>
<div class="scroll__item">HTML & CSS</div>
<div class="scroll__item">SQL</div>
</div>
</div>
</main>
</body>
</html>Para visualizar a página criada até o momento, basta clicar com o botão direito do mouse sobre o arquivo index.html e selecionar a opção Open with Live Server.
Essa opção só estará disponível caso você tenha instalado a extensão Live Server no seu VS Code. Com ela, podemos visualizar a página criada no navegador.
Por enquanto, os nomes dos cursos serão exibidos um embaixo do outro. No próximo passo, faremos a estilização e a animação desses itens para criar o efeito de scroll horizontal infinito.
Para nos ajudar a fazer alguns testes e ajustes na página e inspecionar os elementos contidos nela, podemos utilizar as ferramentas do programador.
No Chrome, por exemplo, você pode clicar nos três pontos do navegador (na parte superior direita), ir em Mais ferramentas e clicar na opção Ferramentas do programador ou Ferramentas do desenvolvedor.
Ou então, pode simplesmente utilizar o atalho Ctrl + Shift + I ou o atalho F12, dependendo do seu navegador.
Ao acessar essa ferramenta, você vai conseguir visualizar a opção Toggle device toolbar, que fica no canto superior esquerdo dessa janela que acabamos de abrir (é a segunda opção, ao lado esquerdo de Elements).
Essa ferramenta nos permite selecionar um elemento na nossa página e verificar as propriedades dele dentro da janela de desenvolvedor.
Vamos iniciar agora a estilização da nossa página. O primeiro passo será criar o arquivo style.css.
Com o arquivo criado, vamos linkar esse CSS ao nosso HTML, adicionando a tag <link> com o caminho para o arquivo CSS dentro da <head> do documento HTML. Dessa forma, as estilizações feitas no CSS serão aplicadas à nossa página.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animação de Scroll Horizontal Infinito</title>
<link rel="stylesheet" href="style.css" />
</head>Feito isso, o primeiro seletor que você adicionará ao CSS será o seletor universal, definido com o asterisco. Vamos utilizar esse seletor para zerar a margem e o padding de todos os elementos e definir o box-sizing como border-box.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Com isso, podemos definir os atributos das nossas divs que compõem o Scroll Horizontal Infinito.
Começando pela div com a classe scroll, vamos atribuir as propriedades margin-top com o valor de 50px e margin-inline com o valor auto. Isso ajustará a margem superior do elemento e as margens laterais dele.
Além das margens, vamos determinar a largura máxima (max-width) como 700px e o padding como 25px. Isso melhorará o posicionamento, espaçamento e visualização do scroll.
Como o objetivo é que os itens presentes dentro do scroll só sejam visíveis quando estiverem dentro da área determinada para ele, vamos adicionar o atributo overflow com o valor hidden. Isso fará com que os elementos que ultrapassarem a área definida para o scroll fiquem invisíveis.
.scroll {
margin-top: 50px;
margin-inline: auto;
max-width: 700px;
padding: 25px;
border-radius: 5px;
overflow: hidden;
}Por enquanto, os itens do nosso scroll estão sendo exibidos um embaixo do outro.
Para ajustarmos a posição dos nossos elementos e melhorarmos o layout em que são exibidos, vamos transformar a nossa div com a classe scroll__container em um display flex.
Vamos criar o seletor de classe scroll__container dentro do arquivo CSS e utilizar a propriedade display com o valor de flex.
Além disso, para ajustar o espaçamento entre os elementos, definiremos o atributo gap com o valor de 10px.
Por fim, para garantir que o container se ajuste à largura de seu conteúdo, definiremos a propriedade width com o valor de max-content. Isso faz com que o container seja tão largo quanto o seu conteúdo, sem restringir-se à largura do seu elemento pai, a div scroll.
.scroll__container {
display: flex;
gap: 10px;
width: max-content;
}Com isso, já teremos os nossos elementos posicionados lado a lado, com um espaçamento adequado entre eles.
Agora podemos formatar os itens do nosso scroll, editando o visual deles. Para isso, crie um seletor para a classe scroll__item dentro do CSS.
Nesse seletor, definiremos a cor de fundo como preta (background-color: black) e a cor da fonte como branca (color: white).
Também ajustaremos o espaçamento superior/inferior e o espaçamento lateral, atribuindo o valor de 10px e 20px para a propriedade padding. Assim teremos 10 pixels em cima e embaixo e 20 pixels nas laterais, melhorando a visualização dos nossos itens.
Para evitar a quebra de linha do texto dos nossos elementos, vamos definir o atributo white-space com o valor de nowrap. E, por fim, podemos arredondar as bordas dos nossos itens com a propriedade border-radius, passando o valor de 5px.
.scroll__item {
background-color: black;
color: white;
padding: 10px 20px;
white-space: nowrap;
border-radius: 5px;
}Com essas alterações, a parte visual do nosso scroll horizontal infinito estará feita.
Observe que, a partir do HTML, não conseguimos mais visualizar os itens presentes no nosso scroll. Para isso, criaremos a animação que irá deslocar o nosso scroll horizontalmente.
Antes de criarmos a animação em si para o nosso scroll, vamos entender como funciona a propriedade translate, que cria o movimento horizontal do nosso elemento.
Para visualizar a mudança que essa propriedade causa ao elemento, podemos utilizar a ferramenta do desenvolvedor, selecionar a <div> com a classe scroll__container e adicionar, na janela de estilo, a propriedade translate com o valor de -100%.
Repare que, com esse valor, todos os nossos elementos saem da tela, deixando apenas o final do último item visível.
Ou seja, para fazer com que o nosso scroll se mova horizontalmente na tela, teremos de modificar a propriedade translate dele. Porém, nós não faremos isso manualmente, mas sim através de uma animação que tornará esse movimento fluido e contínuo.
No entanto, perceba que, ao chegar ao final, nosso scroll está ficando vazio. Por isso, precisamos duplicar os nossos elementos. Dessa forma, quando a primeira sequência estiver finalizando, a segunda já terá iniciado, mantendo o scroll sempre preenchido.
Existem duas formas de duplicarmos os elementos que fazem parte do nosso scroll horizontal.
A primeira delas seria manualmente, duplicando cada um dos elementos dentro do código HTML. Porém, além de mais trabalhosa, essa não é a maneira mais eficiente.
Para tornar esse processo mais prático e automático, podemos utilizar o JavaScript. Assim, se adicionarmos mais elementos ao scroll, eles serão duplicados automaticamente.
Vamos começar criando um arquivo JavaScript chamado scripts.js.
E assim como linkamos o arquivo CSS com nosso documento HTML, faremos o mesmo para esse arquivo JavaScript. Adicionaremos a tag <script> no final do <body>, antes da tag </body>.
<body>
<main>
<div class="scroll">
<div class="scroll__container">
<div class="scroll__item">Excel</div>
<div class="scroll__item">Power BI</div>
<div class="scroll__item">VBA</div>
<div class="scroll__item">PowerPoint</div>
<div class="scroll__item">Python</div>
<div class="scroll__item">JavaScript</div>
<div class="scroll__item">HTML & CSS</div>
<div class="scroll__item">SQL</div>
</div>
</div>
</main>
<script src="scripts.js"></script>
</body>Dentro do código em JavaScript, definiremos a variável elemScroll que armazenará o nosso scroll horizontal.
Para isso, utilizaremos o método querySelector para selecionar o elemento com a classe .scroll dentro do nosso documento HTML.
Com o scroll definido dentro do código, podemos utilizar o mesmo método para armazenar o scroll__container, pegando esse elemento a partir da variável que está armazenando o scroll.
let elemScroll = document.querySelector(".scroll");
let elemContainer = elemScroll.querySelector(".scroll__container");Para armazenar cada um dos itens presentes dentro da <div> scroll__container, podemos criar uma variável chamada elemFilhos. Essa variável será um array (lista) contendo cada um dos itens dentro do nosso elemContainer.
let elemScroll = document.querySelector(".scroll");
let elemContainer = elemScroll.querySelector(".scroll__container");
let elemFilhos = Array.from(elemContainer.children);A partir disso, podemos utilizar o método forEach para iterar sobre cada um dos elementos filhos (elemFilhos) e, para cada item nesse array, iremos clonar o elemento atual (item) utilizando o método cloneNode(true).
Além disso, definiremos o atributo aria-hidden do elemento clonado como true, para indicar que esse elemento é uma cópia e não deve ser lido por leitores de tela.
Por fim, adicionamos o elemento clonado ao final do scroll__container utilizando o método appendChild.
let elemScroll = document.querySelector(".scroll");
let elemContainer = elemScroll.querySelector(".scroll__container");
let elemFilhos = Array.from(elemContainer.children);
elemFilhos.forEach((item) => {
let elemDuplicado = item.cloneNode(true);
elemDuplicado.setAttribute("aria-hidden", true);
elemContainer.appendChild(elemDuplicado);
});Com isso, teremos duplicado corretamente os elementos do nosso scroll e podemos partir para a animação dele.
Caso você queira se aprofundar um pouco mais em JavaScript e entender melhor os procedimentos que foram feitos nessa etapa, eu vou deixar duas sugestões de aula para que você possa acompanhar:
Como vimos, para criar a nossa animação, teremos de trabalhar com a propriedade translate. Ao utilizarmos essa propriedade com o valor de -100%, temos todos os nossos itens sendo removidos da tela porque deslocamos em 100% para a esquerda.
Como queremos que somente a primeira parte do scroll suma, para que comece a segunda parte que duplicamos com o JavaScript, vamos utilizar o valor de -50%.
Além disso, precisamos descontar desse valor metade da diferença criada com o gap entre os elementos, pois esse espaçamento gerado pelo gap não existe para o primeiro item do scroll.
Quando queremos atribuir um valor na forma de um cálculo a uma propriedade do CSS, precisamos utilizar a função calc da seguinte forma:
translate: calc(-50% - 5px);Agora que encontramos o valor que precisamos atribuir à propriedade translate, podemos criar de fato a nossa animação dentro do arquivo CSS que fará essa mudança automaticamente e constantemente.
Para isso, utilizaremos dos @keyframes. Os keyframes são parte fundamental das animações no CSS, nos permitindo definir os estados e controlar como os estilos do elemento se transformam e mudam ao longo do tempo.
Caso queira, pode conferir a nossa aula completa sobre animações no CSS, clicando aqui.
Para criar um keyframe, vamos definir a regra @keyframes seguida pelo nome da animação:
@keyframes scrollInfinito {
}Como o estado inicial dessa animação é o padrão, podemos definir dentro dela apenas o estado final (to) para o qual queremos modificar a propriedade translate, que será com o valor encontrado anteriormente.
@keyframes scrollInfinito {
to {
translate: calc(-50% - 5px);
}
}Com o @keyframe da animação definido, podemos adicionar a propriedade animation ao nosso seletor scroll__container.
Essa propriedade receberá como parâmetros: o nome da animação, o tempo de duração, a função de temporização (linear para manter a velocidade durante toda a execução) e a propriedade infinite, para que a animação se repita infinitamente.
.scroll__container {
display: flex;
gap: 10px;
width: max-content;
animation: scrollInfinito 10s linear infinite;
}Com isso, já teremos a nossa animação rodando perfeitamente.
No entanto, podemos fazer alguns ajustes visuais para melhorar o efeito e a transição desse scroll.
Podemos fazer alguns ajustes visuais para melhorar o efeito e a transição desse scroll utilizando a propriedade mask.
A propriedade mask no CSS nos permite criar máscaras sobre os elementos da nossa página, controlando assim a visibilidade de partes específicas dele. Vamos criar uma máscara dentro do nosso seletor scroll.
Vamos criar uma máscara com um gradiente linear (linear-gradient), que se move da esquerda para a direita (to right).
Nossa máscara começará transparente na borda esquerda e começará a se tornar opaca (visível) até 15% do comprimento do nosso elemento. Em seguida, ela permanecerá visível até 85% do comprimento do elemento, voltando a ficar transparente gradualmente até a borda direita.
.scroll {
margin-top: 50px;
margin-inline: auto;
max-width: 700px;
padding: 25px;
border-radius: 5px;
overflow: hidden;
mask: linear-gradient(to right, transparent, red 15%, red 85%, transparent);
}Repare que dentro da máscara eu defini a cor como vermelho para indicar os locais onde o elemento deve ser visível. Isso porque para a máscara, a cor serve apenas como um indicativo para o local onde o elemento deve ficar visível. Poderíamos usar qualquer cor no lugar de vermelho que funcionaria da mesma forma.
Para finalizar, podemos ajustar a cor de fundo da nossa página para um cinza mais escuro. Isso deixará o visual do nosso scroll e da máscara muito mais interessante. Então, podemos adicionar o seletor body com o atributo background-color: gray.
body {
background-color: gray;
}E assim concluímos o nosso scroll horizontal infinito com HTML, CSS e JavaScript.
Nessa aula, eu te ensinei como criar uma animação de scroll horizontal infinito com HTML, CSS e JavaScript!
Esse é um elemento visual muito interessante para que você possa implementar em seus projetos web, tornando-os ainda mais profissionais e completos!
Para acessar publicações de HTML e CSS, clique aqui!
Posts mais recentes da Hashtag Treinamentos
![[Ciência de Dados] Placas de vídeo gratuitas para Ciência de Dados](https://www.hashtagtreinamentos.com/wp-content/uploads/2024/06/Ciencia-de-Dados-Placas-de-video-gratuitas-para-Ciencia-de-Dados-01-300x169.png "Placas de Vídeo para Ciência de Dados - 2 Placas Online e Gratuitas 7")
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.