import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Image from 'next/image'
import React, { useRef ,useEffect, useState } from 'react';
export default function Home() {
let ref = useRef()
const [offset, setOffset] = useState();
useEffect(() => {
window.addEventListener("scroll", handleScroll)
return () => window.removeEventListener("scroll", handleScroll)
}, []);
return (
<div className={styles.container}>
<div className={styles.section}>
<Head>
<title>Parallax Effect</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Image className={styles.bg}
src="/../public/bg.jpg"
layout="fill"
quality={100}
/>
<Image className={styles.moon}
src="/../public/moon.png"
layout="fill"
quality={100}
// style={{ transform: `translateY(${offset * 0.5}px)` }}
/>
<Image className={styles.mountain}
src="/../public/mountain.png"
layout="fill"
quality={100}
/>
<Image className={styles.road}
src="/../public/road.png"
layout="fill"
quality={100}
/>
<h2 className={styles.text}>Moon Light</h2>
</div>
</div>
)
}
I am looking for assistance with the code above to achieve a parallax effect on scroll. I want the moon image to move left by 10px every time the user scrolls to the bottom.
- I aim to shift the moon image to the left by 10px upon scrolling to the bottom of the page.
- I want the h2 header to scroll under the road image as the user scrolls.
- The sky and mountain images should remain static while the moon and header respond to the scroll event listener.