Protocolo de parálisis de desplazamiento

Abrir en el editor Publica tu código

Recomendado

3 March 2025

Guía de marcas de coches del mundo (en turco)

1 April 2023

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
  }
  .codigo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #272822;
    color: #F8F8F2;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 18px;
    padding: 20px;
    border-radius: 8px;
    white-space: pre-line;
    text-align: left;
    line-height: 1.6;
    max-height: 50%;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  .selector { color: #F92672; }
  .property { color: #66D9EF; }
  .value-number { color: #AE81FF; }
  .value-string { color: #E6DB74; }
  .value-color { color: #A6E22E; }
  .brace { color: #F8F8F2; }
  .comment { color: #75715E; }
  .function { color: #A6E22E; }
  .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;
  }
  .scroll-lane {
    width: 100px;
    height: 100vh;
    background-color: #222;
    position: relative;
    animation: scroll-lane 5s linear infinite;
  }
  @keyframes scroll-lane {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100vh); }
  }
  .scrolling-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transform: translateY(0);
    animation: scroll-content 5s linear infinite, fade-in-out 1s linear infinite;
  }
  .scrolling-content::-webkit-scrollbar {
    height: 0; /* HIDE scrollbar */
    width: 0;
  }
  .content-unit {
    height: 100px;
    background-color: #333;
    margin-bottom: 10px;
    text-align: center;
    line-height: 100px;
    color: #eee;
    /* Crie uma animação que dê a ilusão de conteúdo carregando */
    animation: scroll-content-ripple 1.5s ease-in-out infinite;
  }
  @keyframes scroll-content-ripple {
    0%   { transform: scale(1); opacity: 1; }
    33%  { transform: scale(1.1); opacity: 0.8; }
    66%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.1); opacity: 0.8; }
  }

/* Adicione uma animação de fade-in/fade-out para cada unidade de conteúdo */
  @keyframes fade-in-out {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

Protocolo de parálisis de desplazamiento

Recomendado

Cuadro de búsqueda

Guía de marcas de coches del mundo (en turco)

Deslizador de tarjetas

HTML

CSS

JS

Recomendado

Cuadro de búsqueda

Guía de marcas de coches del mundo (en turco)

Deslizador de tarjetas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS