How to implement smooth responsive parallax effect in react?

Question

I have been tasked with creating a landing page for a website. I'm going to be using React, now one of the major things is a parallax effect. When the page first loads, there is navbar at the top (transparent background) but more importantly a header, subtitle and picture that looks like its in the background. As soon as the user begins to scroll down, a parallax effect where basically it zooms out of the picture and transforms it to the right while an image right beside it on the left appears to come in. For a visual example, its something similar to https://pitch.com/ landing page except the second picture looks more separated rather than looking like a part of the picture.

I am wondering how this can be implemented, I started with trying to put the first image in the background but that had a few issues like I wasnt able to fit the picture in the background perfectly, since theres no src set for background-img, but I think the better way would be to have the two images as one image, and somehow when the page loads have it zoomed in on the first pic so that when the user scrolls, the image is scaled and translated to the right? I looked at pitch's code using inspect element it seems like that is what they're doing i think? Is this the best approach and from an implementation stand point with react would i add an event listener for userscroll inside the image component and then pass in a function from App.jsx that handles that?

Answer 1

You could check out react-spring, have a look at their examples here: https://www.react-spring.io/docs/hooks/examples

Going by your description you should look into interpolating your mouse scroll to the transform property of the image.