Protocolo de paralisia de rolagem

270 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

22 June 2025

Exemplo de formulário de login em HTML

16 April 2025

Um Código de Metehan

18 June 2025

Portal Escolar: Verificação de Resultados e Pagamento de Mensalidades

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

Recomendado

Exemplo de formulário de login em HTML

Um Código de Metehan

Portal Escolar: Verificação de Resultados e Pagamento de Mensalidades

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS