Parallax images: how to position the moving image to start the parallax always from the center of another image in a container

[_username7777]

I have these two images where I want to use a parallax effect. 

I don't know what size the larger images will be, so I want to account for portrait and landscape 

 

I want to position the green box so it starts exactly centered within the larger image, and then finishes its parallax just at the top of the container 

 

const heightDiff = pImage.offsetHeight - pImage.parentElement.offsetHeight;

yPercent: -heightDiff
yPercent: heightDiff

So I've created this variable, where it calculates it dynamically, however inputting the variable in my yPercent breaks the parallax 
Is this the right idea? 

 

See the Pen abEzGjp by sophielihenry (@sophielihenry) on CodePen

[OSUblake]

Hi _username,

 

yPercent is based on the height of the element, so if the element's height is 200px, then yPercent: -100 would move it 200px up. So your current calculation would be more appropriate for y instead of yPercent.