How make a background fade in at beginning and end of document?

I have a fiddle in javascript but I dont get it to work in vue3 with composition api (script setup). The background just overlays everything and nothing changes.

Any idea how I can get this to work?

here is the code in stackblitz in a vue3 application:

I am open to improvements of the code. Or if there is a better solution (maybe a package) with vue available.