Hola, estoy tratando de replicar el efecto de paralaje de este sitio web de wordpress https://cfs-me.com/ en react y next.js.

Estoy tratando de lograr esto con el paquete react-scroll-parallax npm.

mi archivo _app.js es...

 import TopNav from '../components/TopNav'; import 'bootstrap/dist/css/bootstrap.min.css'; import 'antd/dist/antd.css'; import { ParallaxProvider } from 'react-scroll-parallax'; import '../public/css/styles.css'; function MyApp ({ Component, pageProps }) { return ( <> <TopNav /> <ParallaxProvider> <Component {...pageProps} />; </ParallaxProvider> </> ) } export default MyApp;

y en el index.js....

 import Image from 'next/image' import { Parallax } from 'react-scroll-parallax' const Index = () => { return ( <> <div className="content"> <Parallax offsetYMin={200} offsetYMax={1500}> <h1 className="jumbotron text-center bg-primary titlemain">hello</h1> </Parallax> <Parallax offsetYMin={-500} offsetYMax={2000}> <Image src="/public/images/tree-geec0e486b_1920.jpg" layout="fill" /> </Parallax> </div> <style jsx>{` .titlemain { color: white; margin: 0; height: 300px; display: flex; align-items: center; justify-content: center; } `}</style> </> ) }; export default Index;

No puedo cargar la imagen y no entiendo muy bien los dos elementos de paralaje que obtuve de los documentos. Las herramientas para desarrolladores de Chrome los leen como internos y externos. Cualquier ayuda sería muy apreciada. Gracias