パララックスアニメーション_1

<div class="pMV">
  <div class="pMV__inner">
    <div class="pMV__image">
      <img src="https://1st-code.com/wp-content/uploads/parallax-animation-sample.webp" />
    </div>
  </div>
</div>
<div style="background: beige; height: 500px; width: 100%"></div>
<div style="background: beige; height: 500px; width: 100%"></div>
<div style="background: beige; height: 500px; width: 100%"></div>

.pMV {
  width: 100%;
  height: 100svh;
  display: grid;
  place-items: center;
}
.pMV__inner {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.pMV__image {
  width: 425px;
  height: 550px;
  overflow: hidden;
  position: relative;
  top: 50vh;
  /* border: 1px solid red; */
}
.pMV__image img {
  width: 500px;
  height: 600px;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.3);
}

/* 打消し */
body {
  display: block;
}
.codePreview__content {
  display: contents;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(".pMV__image img", {
    y: "-100px",
    ease: "none",
    scrollTrigger: {
      trigger: ".pMV",
      start: "top top",
      end: "bottom top",
      scrub: true
    }
  });
</script>