How to scroll the background image then the body scroll?
I want to create an engaging scrolling experience for the webpage where, on the initial scroll, a prominent image begins to move upward. As the user scrolls, the image will gradually ascend until it completely exits the view. Simultaneously, the background color of the page will transition, creating a dynamic visual effect. During this phase, the rest of the page content remains fixed. Once the image has fully scrolled out of sight, the normal scrolling behavior resumes, allowing the user to continue navigating through the remaining body content. This design aims to captivate users right from their first interaction with the page, offering a seamless and visually appealing transition from the image to the textual content.