Estoy tratando de hacer un efecto de cortina. Quiero que la imagen de la cortina suba y revele el texto y la imagen de abajo. una vez que está completamente oculto, se desplaza a la página siguiente. Esto es algo que hice https://jsfiddle.net/poezny2a/3/ pero no es perfecto, ya que puedes ver que la cortina desde arriba tiene menos opacidad. Cualquier código Jquery o javascript funcionaría. Muchas gracias :)

 <div class="curtain"> <div class="bg"> </div> <div class="invert"> <img src="https://taschenoper.pocketoperator.de/wordpress/wp-content/uploads/2022/06/image.jpg"> <h2> Hello world </h2> </div> </div> Css: `:root { --minh: 98vh; --color1: wheat; --color2: midnightblue; } .bg { /** create the "split" background **/ background-image: url('https://taschenoper.pocketoperator.de/wordpress/wp-content/uploads/2022/06/curtains.png'); background-repeat:no-repeat; position:absolute; width:100%; height:100%; background-size:cover; } /** add extra space to the bottom (need this for the "sticky" effect) **/ .curtain::after { content: ""; display: block; min-height: var(--minh); } img{ max-width:100%; } h2{ position:absolute; } .invert { /** make the content sticky **/ position: sticky; top: 20px; /** blend the content with the contrast effect **/ mix-blend-mode: color-burn; /** center the content **/ display: flex; align-items: center; justify-content: center; /** set the minimum height of the section **/ min-height: var(--minh); }

`