Как получить элемент для постепенного преобразования на основе позиции прокрутки

Question

Я пытаюсь использовать путевые точки для двух конкретных функций.

1. Чтобы определить, прокручивает ли пользователь вверх или вниз и отображается ли контейнер.Это не работает.

2. Второе, что я пытаюсь выяснить, как это сделать, не обязательно связано с путевыми точками.Я хочу, чтобы изображение, которое вы видите во фрагменте, постепенно transform: translateX на основе последовательности прокрутки.Я не уверен, как это сделать.Я поместил перевод во фрагмент, чтобы показать движение.

Если вы зайдете на этот сайт и прокрутите немного вниз до раздела «Nike and Snapchat», выувидим изображение телефона Леброна.По мере постепенного перемещения вверх или вниз изображение перемещается соответственно.Это то, что я пытаюсь воспроизвести.

Кто-нибудь знает, что я могу сделать, чтобы добиться этого?

var homeMainSec = 	$('#homeMainSec');
	
homeMainSec.waypoint(function(direction) {
  if (direction === 'down') {
    $('#homeBoxGridRight img').addClass('slideLeftDisplay');
    console.log('Left Slide');
  }
}, {
  offset: '25%'
});
homeMainSec.waypoint(function(direction) {
  if (direction === 'up') {
    $('#homeBoxGridRight img').addClass('slideRightDisplay');
    console.log('Right Slide');
  }
}, {
  offset: '25%'
});

#homeMainSec {
	width: 100%;
	height: 95vh;
	position: relative;
	margin-top: 70px;
}
.homeMainBlock {
	height: 100%;
	width: 50%;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}
/*- HomeBoxGridRight Section -*/
#homeBoxGridRight img {
	display: block;
	width: 40%;
	height: auto;
	margin-left: 50%;
}
.slideLeftDisplay {
	transform: translateX(-100px);-webkit-transform: translateX(-100px);
	transition: 1s;-webkit-transition: 1s;
	opacity: 1;
}
.slideRightDisplay {
	transform: translateX(100px);-webkit-transform: translateX(100px);
	transition: 1s;-webkit-transition: 1s;
	opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<section id="homeMainSec">
  <div class="homeMainBlock" id="homeBoxGridLeft">
  </div><div class="homeMainBlock" id="homeBoxGridRight">
    <img src="https://slidesjs.com/examples/standard/img/example-slide-1.jpg" alt="Image">
  </div>
</section>
<br><br><Br><br><br><br><br><br>

Answer 1

Это дает вам положение прокрутки страницы для вертикальной прокрутки

window.pageYOffset

Это дает вам общую высоту прокрутки для тела

document.querySelector("body").scrollHeight

Вам необходимо вычесть высоту элемента полосы прокрутки, которая даетсяна

document.scrollingElement.offsetHeight

Вы можете перевести относительно соотношения положения вертикальной прокрутки и роста тела

window.pageYOffset/(document.querySelector("body").scrollHeight - document.scrollingElement.offsetHeight)

Это даст вам соотношение текущей позиции к максимальной позиции с возможностью прокрутки.Управляйте им так, как вам нравится, чтобы элементы переводились в исходное положение.