When I was working out how web dev works, I learned the hard way that adding a div is often a good idea, and when you see most modern websites they are a huge pile of divs. If you want a centered div, add another div that is just the full size of the space to center inside, then centering within that div is relatively easy.
The same sort of goes with many visual tricks, although this one is very clean, which makes it all the more impressive.
I appreciate you noticed the cleanness. It was a challenge to get it down to 2 divs and 2 classes. I’m disappointed that `background-attachment: fixed` isn’t supported on mobile after all these years. If it were, the full effect could easily be applied to any element with a single CSS class.
If I were to make serious use of this on a site, I’d probably opt for the non-JavaScript one class version anyways and optimize for simplicity.
For what it's worth, I have a site that I wrote in HTTP/CSS where I make use of blur in the top bar, and I will be switching over to this effect soon using your blog post as a guide. Thank you.
There is no problem in CS that can't be solved by another level of indirection.