Illusion de défilement infini

1032 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

6 November 2025

Carte du monde interactive avec React et D3.js

23 August 2025

Modèle HTML de boutique de commerce électronique Tailwind CSS

10 May 2025

Un code de Mete

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

Recommandé

Carte du monde interactive avec React et D3.js

Modèle HTML de boutique de commerce électronique Tailwind CSS

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS