WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animación de texto al desplazarse
4056
AiCode
Abrir en el editor
Publica tu código
Recomendado
9 December 2024
Efecto de animación de desplazamiento mediante HTML, CSS y Javascript
14 May 2025
baúl del avión
8 September 2024
Alternar serpiente
HTML
Copy
Webleb
Text appears when you scroll
CSS Text animation
CSS
Copy
body { display: grid; place-items: center; min-height: 200vh; background: hsl(0 0% 0%); color: hsl(0 0% 98%); font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui; } ::-webkit-scrollbar { background: transparent; width: 5px; height: 5px; } ::-webkit-scrollbar-thumb { background-color: #3c3f58; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.3); } section { position: fixed; top: 0; left: 50%; display: grid; justify-content: start; align-content: center; translate: -50% 0; height: 100vh; width: 600px; max-width: calc(100% - 4rem); gap: 1rem; } :is(p) { margin: 0; font-size: 1rem; font-weight: 400; font-size: clamp(1rem, 0.75vw + 1rem, 1.25rem); } :is(p:nth-of-type(2), a) { opacity: 0; animation: fade-in both linear; animation-timeline: scroll(root); animation-range: 75vh 90vh; } p:nth-of-type(2) { --opacity: 0.65; } @keyframes fade-in { to { opacity: var(--opacity, 1); } } p:nth-of-type(1) { font-size: clamp(1rem, 3vw + 1rem, 2rem); font-weight: 600; background: #1FA2FF; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #A6FFCB, #12D8FA, #1FA2FF); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #A6FFCB, #12D8FA, #1FA2FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ -webkit-background-clip: text; background-position: 50% 0; color: transparent; opacity: 0; animation: move-bg both linear, fade-in both linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; }
JS
Copy
//Nothing to Copy