Scroller Horizontal com CSS
O desenvolvimento de interfaces web dinâmicas e atraentes é uma busca constante entre os desenvolvedores. Um dos efeitos visuais que pode chamar a atenção dos usuários é o scrolling horizontal. Neste artigo, vamos explorar como criar um efeito de scroller horizontal usando apenas CSS. Iremos dissecar um exemplo de código que demonstra esse efeito e explicar cada parte do mesmo.
Introdução
O código fornecido demonstra como criar um efeito de scrolling horizontal usando HTML e CSS. O objetivo é exibir uma lista de elementos com um efeito visual atraente que é ativado quando o usuário rola a tela horizontalmente.
Estrutura do Código
O código HTML básico fornece a estrutura do documento e define o conteúdo que será estilizado pelo CSS.
<html lang="pt-br">
<head>
<link rel="stylesheet" href="css/style.css">
<title>scrolling horizontal com css</title>
<meta charset="utf-8">
</head>
<body>
<h2>SCROLLER HORIZONTAL COM CSS</h2>
<div class="scrolling">
<div class="scrolling-item">
<img src="img/mk2.png" alt="" />
</div>
</div>
</body>
</html>Estilizando o Scrolling Horizontal
O CSS é onde a mágica acontece. O seletor .scrolling é usado para estilizar o contêiner principal que contém os elementos a serem rolados horizontalmente. Ele recebe várias propriedades para configurar o layout da rolagem e do espaçamento.
.scrolling {
max-width: 100%;
padding: 10px;
display: grid;
grid-auto-flow: column;
column-gap: 1rem;
overflow-x: auto;
}Aqui está o que cada propriedade faz:
max-width: 100%;– Define a largura máxima do contêiner como 100% da largura disponível.
padding: 10px;– Adiciona espaçamento interno ao contêiner.
display: grid;– Aplica um layout de grid ao contêiner.
grid-auto-flow: column;– Define que os elementos filhos devem ser colocados em colunas.
column-gap: 1rem;– Define o espaço entre as colunas.
overflow-x: auto;– Adiciona uma barra de rolagem horizontal quando o conteúdo excede a largura do contêiner.
Estilizando os Itens do Scrolling
Os itens individuais dentro do contêiner de scrolling são estilizados usando a classe .scrolling-item.
.scrolling-item {
position: relative;
width: 200px;
height: 200px;
border: 4px solid #151515;
border-radius: 50%;
}position: relative;– Define a posição como relativa para que outros elementos possam ser posicionados relativamente a este.
width: 200px;– Define a largura dos itens.
height: 200px;– Define a altura dos itens.
border: 4px solid #151515;– Adiciona uma borda sólida de 4px com a cor #151515.
border-radius: 50%;– Cria um formato circular aplicando um raio de borda de 50%.
Adicionando um Efeito de Fundo
Uma parte interessante deste exemplo é o efeito de fundo gradiente que é aplicado aos itens. Isso cria um visual mais atraente quando os itens são rolados horizontalmente. O pseudo-elemento ::before é usado para criar o efeito de fundo.
.scrolling-item::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% + 15px);
height: calc(100% + 15px);
background-image: linear-gradient(45deg, #f09433 0%, #e6481c 25%, #dc2743 50%, #b382bc 75%, #bc1888 100%);
border-radius: inherit;
z-index: -1;
}content: '';– Adiciona conteúdo vazio ao pseudo-elemento.
position: absolute;– Define a posição absoluta do pseudo-elemento.
top: 50%; left: 50%;– Posiciona o elemento no centro do item.
transform: translate(-50%, -50%);– Move o elemento 50% para cima e 50% para a esquerda, efetivamente centralizando-o.
width: calc(100% + 15px); height: calc(100% + 15px);– Aumenta o tamanho do elemento para que o gradiente seja visível ao redor do item.
background-image: linear-gradient(...);– Cria um gradiente linear colorido como fundo.
border-radius: inherit;– Herda o raio de borda do item principal.
z-index: -1;– Define um índice Z negativo para que o pseudo-elemento fique atrás do conteúdo do item.
Conclusão
O efeito de scrolling horizontal usando CSS é uma maneira criativa de adicionar interatividade e atratividade às suas interfaces web. Ao estilizar um contêiner de rolagem e seus itens, combinado com efeitos visuais como gradientes de fundo, você pode criar uma experiência única para os usuários.
Clique no botão abaixo e faça o download do projeto!
Para aprender mais sobre animações e truques com CSS acesse a página CSS
Siga a nossa página no instagram @codekong1
