Closed gavan1 closed 1 year ago
With create Next app. ( no Tailwind)
_app.js
import '@/styles/globals.css' import { ParallaxProvider } from 'react-scroll-parallax'; export default function App({ Component, pageProps }) { return <ParallaxProvider><Component {...pageProps} /></ParallaxProvider> }
and in index.js
import Head from 'next/head' import Image from 'next/image' import { Inter } from 'next/font/google' import styles from '@/styles/Home.module.css' import { Parallax } from 'react-scroll-parallax'; const inter = Inter({ subsets: ['latin'] }) export default function Home() { return ( <> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <main className={styles.main}> <div className={styles.description}> <p> Get started by editing <code className={styles.code}>src/pages/index.js</code> </p> <Parallax speed={-100}> <div> <a href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" target="_blank" rel="noopener noreferrer" > By{' '} <Image src="/vercel.svg" alt="Vercel Logo" className={styles.vercelLogo} width={100} height={24} priority /> </a> </div> </Parallax> </div> <div className={styles.center}> <Image className={styles.logo} src="/next.svg" alt="Next.js Logo" width={180} height={37} priority /> </div> <div className={styles.grid}> <a href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" className={styles.card} target="_blank" rel="noopener noreferrer" > <h2 className={inter.className}> Docs <span>-></span> </h2> <p className={inter.className}> Find in-depth information about Next.js features and API. </p> </a> <a href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" className={styles.card} target="_blank" rel="noopener noreferrer" > <h2 className={inter.className}> Learn <span>-></span> </h2> <p className={inter.className}> Learn about Next.js in an interactive course with quizzes! </p> </a> <a href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" className={styles.card} target="_blank" rel="noopener noreferrer" > <h2 className={inter.className}> Templates <span>-></span> </h2> <p className={inter.className}> Discover and deploy boilerplate example Next.js projects. </p> </a> <a href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" className={styles.card} target="_blank" rel="noopener noreferrer" > <h2 className={inter.className}> Deploy <span>-></span> </h2> <p className={inter.className}> Instantly deploy your Next.js site to a shareable URL with Vercel. </p> </a> </div> </main> </> ) }
Parallax layer does not scroll just offsets. same things happens with a basic react app.
I'de recommend add full source of a basic scroll app working, since something is missing in your setup documentation.
Looks like a bug in the latest version. Try pinning to 3.3.2 while I look into the cause.
Fix was published in v3.4.2
Is it me or it still does not fix? I'm on v3.4.2 with the same issue.
With create Next app. ( no Tailwind)
_app.js
and in index.js
Parallax layer does not scroll just offsets. same things happens with a basic react app.
I'de recommend add full source of a basic scroll app working, since something is missing in your setup documentation.