Infinite scroll illusion

Open In Editor 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 Tags Scroll

depth illusion

Infinite Orbit Animation with CSS Trigonometry

HTML

CSS

JS

Recommended

Infinite Tags Scroll

depth illusion

Infinite Orbit Animation with CSS Trigonometry

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS