Infinite scroll illusion

Open In Editor Video Publish Your Code

* {
  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 */
}

Infinite scroll illusion

Recommended

Infinite Craft

Infinite Orbit Animation with CSS Trigonometry

Scroll to exist

HTML

CSS

JS

Recommended

Infinite Craft

Infinite Orbit Animation with CSS Trigonometry

Scroll to exist

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS