:root { --distancia-desplazamiento-suave: 40px; --duracion-desplazamiento-suave: 0.6s; } /* Visible por defecto. Si JavaScript no carga correctamente, el contenido permanece visible y no queda oculto. */ .scroll-item { opacity: 1; transform: none; } /* El efecto solo se activa cuando el JavaScript agrega la clase js-desplazamiento-suave al elemento . */ .js-desplazamiento-suave .scroll-item { opacity: 0; transform: translateY( var(--distancia-desplazamiento-suave) ); transition: opacity var(--duracion-desplazamiento-suave) ease-out, transform var(--duracion-desplazamiento-suave) ease-out; will-change: opacity, transform; } /* El JavaScript agrega la clase visible cuando el elemento entra en pantalla. */ .js-desplazamiento-suave .scroll-item.visible { opacity: 1; transform: translateY(0); } /* Respeta la configuración de accesibilidad del usuario. */ @media (prefers-reduced-motion: reduce) { .js-desplazamiento-suave .scroll-item { opacity: 1; transform: none; transition: none; } }