Phone focus / scrolling item highlight

Site URL: https://apricots-kazoo-nnje.squarespace.com/config/pages

Hello everyone!

There is an effect I am looking to achieve on my site but can't quite figure out how to accomplish.  Specifically something like the gif below I created as an example:

I would like it so when on mobile, while scrolling, whatever button / image is in the middle of the screen is highlighted.  Something similar to hovering over a button with your mouse on a desktop button.

I created a test page to work with: https://apricots-kazoo-nnje.squarespace.com/phone_test

I've tried to look up answers myself, but am not sure what this effect would actually be called - targeting things to happenen when in a certain area of the screen - so googling it has not yielded answers...

Any assistance or pointing me in the proper direction for answers would be most appreciated!