Recientemente comencé un proyecto personal para mí y usé el componente Parallax del paquete react-scroll-parallax . Aquí está la documentación por adelantado: https://react-scroll-parallax.damnthat.tv/docs/intro

Lo apliqué con éxito, pero el problema es que hay espacios en blanco adicionales cada vez que lo desplazo.

Esta es la página antes de desplazarse La página después de desplazarse Y este es el resultado que quiero

Obtengo el resultado cada vez que desactivo el componente Parallax . Este es el código que uso:

 <Parallax speed={25}> <div className="header-image h-screen"> <div id="welcomeMessage" className="welcomeMessage relative text-9xl font-bold text-center text-white antialiased cursor-pointer tracking-wide shadow-text top-1/2 left-1/2 z-1" > <Typewriter onInit={(typewriter) => { typewriter .typeString("Welconr!") .changeDelay(175) .pauseFor(200) .deleteChars(3) .changeDelay(150) .pauseFor(150) .typeString("me!") .changeDelay(175) .start(); }} /> </div> </div> <div className="header-svg-clip"> <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white arrowDown" viewBox="0 0 20 20" fill="currentColor" > <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clipRule="evenodd" /> </svg> </div> </Parallax>

Espero que haya alguien que pueda ayudarme. Si necesitas algo más, solo comenta y te responderé. ¡Gracias por adelantado!