Привязать свойство background-position к скроллу

Нужно реализовать на html/css/jQuery такой же эффект как на этом сайте в секции "Почему вам стоит работать с нами"

Пробовал с помощью linear gradient и background position, но не хватает знаний js чтобы зацепиться за значение в css и положение скролла.

<div class="reasons">
  <div class="reasons__image-effect">

    </div>
</div>

.reasons {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.reasons__image-effect {

width: 340px;
        height: 480px;
        border: 12px solid #000;
        -webkit-transform: rotateY(20deg);
        transform: rotateY(25deg);
        -webkit-perspective: 1000px;
        perspective: 1000px;
        background: linear-gradient(0deg, rgba(255, 164, 0, 1) 90%, rgba(255, 255, 255, 1) 90%);}

https://codepen.io/peter-karnauh/pen/bGprGLE