Ilusão de rolagem infinita

436 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

22 August 2025

Animação de notificação de blob CSS

21 July 2025

Entrada de upload de arquivo com ícone SVG

7 May 2025

Um código do Developer7

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.animation-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: #000;
}

/* Layout e animação */ 
.scrollarea{ 
  background-color: rgba(255,255,255, 0.05); /* Background pálido */
  position: relative; 
  width: 300px;
  height: 200px;
  overflow: hidden; 
  margin: 0 auto; 
}

.container { /* Contém as imagens/elementos que se movem */
  width: 300%; /* Largura maior que a área visível */
  display: flex; 
  animation: scroll 15s linear infinite; /* Animação infinita com duração de 15 segundos */
}
.item {
  background: linear-gradient(to bottom, #222, #333); /* Gradiente que muda conforme a rolagem */
  padding: 20px; 
  transform: translateX(-50%); /* Alinha as imagens no centro */
  width: 100px; /* Define a largura da caixa */
  margin: 0 10px;
}

@keyframes scroll { /* Definição da animação */
  0%   { transform: translateX(0); } /* No inicio, a imagem está na posição 0 */
  100% { transform: translateX(-100%); } /* No final, a imagem se move para fora da área visível */
}

Recomendado

Animação de notificação de blob CSS

Entrada de upload de arquivo com ícone SVG

Um código do Developer7

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS