Protocolo de parálisis de desplazamiento

1,018 byby.createsite

Abrir en el editor Publica tu código

Protocolo de parálisis de desplazamiento

Recomendado

26 August 2025

Plantilla HTML para sitio web de películas

17 September 2024

Identidad

30 March 2025

Un código de ytr3d3

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;
  }
  .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; }
  }