Makkul

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!

Bumping this in case any heros out there know the answer to this riddle

Happy to! Here is a link to the page: https://apricots-kazoo-nnje.squarespace.com/cartoons_and_vodka-1

Hi everyone, Been puzzling over this one for a bit now and can't seem to locate the answer anywhere else. Long time lurker, first time poster! I work in animation and have a gallery page where the background video is a short preview snippet of the video, and when you click the 'play button' the actual video pops up as a light box. What I can't figure out is how to pause the background video once the play button is clicked (Otherwise it's pretty distracting behind the lightbox video) I don't particularly mind if the video starts back up again after the lightbox video is closed, but it would be a bonus if it did. It would be ideal if the solution didn't involve a jQuery as I already have a few of those going for other features and, from what I understand, they generally don't play nice with each other (though I may be wrong about that?)