I am trying to make a Curtain Effect. I want the curtain image to go upward and reveal the text and image below. once it's completely hidden then it scrolls to the next page. This is something that i have made https://jsfiddle.net/poezny2a/3/ but it's not perfect as you can see the curtain from above has less opacity. Any Jquery or javascript code would work. Thanks alot :)

 <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);
}

`