I’m trying to hack together my portfolio website in WordPress using the Blocksy theme. I got most things up and running, but I’ve been battling with this for hours today without success..
I have a sticky header that has no background, so you can currently see all the content passing behind it on scroll. What I want is to have a gradual fade of the content from top of the screen approximately 200px down, so the content "fades out" behind the header when moving upwards. Using old school color overlay solutions won’t work either since I have a video background running beneath everything, so the content needs to be masked.
So far I’ve managed to set a mask-image on the container div, but I can’t for the life of me figure out how to make it not move with the content when scrolling. Is there a way to position a mask relative to the viewport or such?
As my programming skills are very limited I probably have overlooked something very basic, but I can’t find any solutions online either, which makes me suspect I might not be approaching this in the right way at all, so I would be very greatful for any pointers on how to achieve this!
You need to sign in to view this answers
