अनंत स्क्रॉल भ्रम

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

5 November 2024

स्क्रॉल संचालित एनिमेशन स्क्रॉल डिटेक्शन

28 May 2025

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

अनंत स्क्रॉल भ्रम

अनुशंसित

स्क्रॉलिंग नेविगेशन बार

स्क्रॉल संचालित एनिमेशन स्क्रॉल डिटेक्शन

स्क्रॉल खोलना

HTML

CSS

JS

अनुशंसित

स्क्रॉलिंग नेविगेशन बार

स्क्रॉल संचालित एनिमेशन स्क्रॉल डिटेक्शन

स्क्रॉल खोलना

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS