WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Protocole de paralysie du défilement
490
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
28 August 2025
Archinova : Atelier d'architecture et de design | Turquie
17 May 2025
site web moderne
28 July 2025
code bloom
HTML
Copy
CONTÉUDO 1
CONTÉUDO 2
CONTÉUDO 3
CONTÉUDO 4
CONTÉUDO 5
CONTÉUDO 6
CONTÉUDO 7
CONTÉUDO 8
CONTÉUDO 9
CONTÉUDO 10
CSS
Copy
* { 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; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */