滚动网页时如何从左到右或从右到左动画div框

Question

我想为div框从左到右以及从右到左制作动画。

假设我有一个带有引导程序类的2个框，例如：

<ng-content select="section>div[aaa]"></ng-content>
----- some other content here -----
<ng-content select="section>div[aaa][bbb]"></ng-content>

现在我要从左到右为#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>