Protocollo di paralisi dello scroll

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

23 February 2025

Contenitore di animazione del messaggio HTML

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

Protocollo di paralisi dello scroll

Consigliato

Un codice di ha11072004cc

Un codice di securearray494

Contenitore di animazione del messaggio HTML

HTML

CSS

JS

Consigliato

Un codice di ha11072004cc

Un codice di securearray494

Contenitore di animazione del messaggio HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS