CSSでカーテンのアニメーションをつける

Question

実現したいこと

画像の上にスクリーンをおき、カーテンのように右にスライドするアニメーションを実現したい。
https://www.sugino.com/recruit/
このサイトに多用されているアニメーションです。

前提

またまだ勉強中なのでうまくいきません。
https://kenpicopico.site/img-ainimation-ltor/
このサイトに同じようなロジックがあったので、実装してみましたが、
画像のサイズよりカーテンのサイズが大きくなります。
また、画像を表示した状態でリロードすると、カーテンが表示されたままでカーテンがはけてくれません。

発生している問題・エラーメッセージ

特にエラーは発生していません。
ただ、かテーンが大きいだけで、きちんとカーテンの動きはします。

該当のソースコード

<!-- quality section -->
    <section class="h-[100vh] quality">
      <h1 class="ml-5 text-5xl mb-1">"Fashion without limits"</h1>
      <p class="ml-5 text-xl mb-5">限界なくファッションを楽しもう。</p>
      <div class="box">
        <img
          id="quality"
          class="curtain ml-5 md:w-[25vw] md:h-auto w-[100vw] h-auto"
          src="../images/quality.jpg"
          alt="quality"
        />
        <div class="screen"></div>
      </div>
    </section>

.box{
  width: 512px;
  height: auto;
  position: relative;
  overflow: hidden;
}
.curtain img {
  width: 100%;
}
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: aquamarine;
  transition: 1s cubic-bezier(0.26, 0, 0.07, 1);
}
.screen.show {
  transform: translateX(100%);
}

$(function () {
  $(window).scroll(function () {
    $(".screen").each(function () {
      var position = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > position - windowHeight) {
        $(this).addClass("show");
      }
    });
  });
});

試したこと

CSSの値をいろいろ80%にしたりなどいろいろいじってみましたが、単にカーテンが20%残るだけでした。

補足情報（FW/ツールのバージョンなど）

google chromeです。

何卒よろしくお願いいたします。

追記1）

<div class="screen w-[512px]"></div>でもダメでした。

追記2）

<div class="box">
  <img
    id="quality"
    class="curtain ml-20 md:w-[512px] md:h-auto w-[100vw] h-auto"
    src="../images/quality.jpg"
    alt="quality"
  />
<div class="screen w-[512px]"></div>

w-[512px]をともに設定することで、右端は合うようになりました。
しかし、ml-20とかマージンを設定すると、カーテンにはマージンが効きません。

<div class="screen ml-20 w-[512px]"></div>としてもダメでした。

追記3）

<div class="w-1/2"> <div class="box"> <img id="quality" class="curtain ml-20 md:w-[512px] md:h-auto w-[100vw] h-auto" src="../images/quality.jpg" alt="quality" /> <div class="screen ml-20 md:w-[512px] md:h-auto w-[100vw] h-auto"></div> </div> </div> クラスを全く一緒にしたらマージンもかかるようになりました。

ただ、画像を表示した状態でロードすると、スクリーンがかかったままです。

Answer 1

$(function () {
  function checkScreens() {
    $(".screen").each(function () {
      var position = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > position - windowHeight) {
        $(this).addClass("show");
      }
    });
  }

  // 初回のチェック
  checkScreens();

  // スクロールイベント時にチェックを実行
  $(window).scroll(function () {
    checkScreens();
  });
});

リロードでもJSで対応できました。