WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un codice di pivete290
997
pivete290
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
25 August 2025
Modello HTML per sito web di film
3 May 2025
Un codice di Mete
30 January 2025
Pulsanti Gradiente Hover
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