как анимировать div блок слева направо или справа налево при прокрутке веб-страницы

Question

я хочу анимировать div-блок слева направо и справа налево.

предположим, у меня есть 2 бокса с классами начальной загрузки. Пример:

<div class="container">
     <div class="row">
        <div class="col-md-6 id="leftToRight"></div>
        <div class="col-md-6 id="RightToLeft"></div>
     </div>
</div>

теперь я хочу анимировать#leftToRight id слева направо и #RightToLeft справа налево.при прокрутке веб-страницы.

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

Answer 1

Вы можете использовать событие wheel, чтобы ответить на ваш вопрос:

$(function() {

$(window).on('wheel', function(e) {

	var delta = e.originalEvent.deltaY;

	if (delta > 0)  //On scroll down
  {
    $('#RightToLeft').animate({
    left:  "-=10px"
    },5);
    
    $('#LeftToRight').animate({
    left:  "+=10px"
    },5);
  }
	else  //This is added for reverse animation on scroll up
  {
    $('#RightToLeft').animate({
    left:  "+=10px"
    },5);
    
    $('#LeftToRight').animate({
    left:  "-=10px"
    },5);
  }
  
	 return false; // this line is only added so the whole page won't scroll in the demo
});
});

#RightToLeft{
  position: relative;
  margin: auto;
  background: red;
  width: 100px;
  height: 100px;
}
#LeftToRight{
  position: relative;
  margin: auto;
  background: blue;
  width: 100px;
  height: 100px;
}
.row{
  margin: auto;
  width:90%;
  overflow: hidden;
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
     <div class="row">
        <div class="col-md-6" id="LeftToRight">Left to Right</div>
        <div class="col-md-6" id="RightToLeft">Right to Left</div>
     </div>
</div>