如何在页面滚动中制作动画幻灯片？

Question

我在页面上有一些HTML元素：

div {
  height: 200px;
}
#div1 {
  background-color: crimson;
}
#div2 {
  background-color: red;
}
#div3 {
  background-color: orange;
}
#div4 {
  background-color: yellow;
}
#div5 {
  background-color: green;
}
#div6 {
  background-color: blue;
}
#div7 {
  background-color: purple;
}
#div8 {
  background-color: magenta;
}

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>

当用户向下滚动页面时，我希望每个元素从侧面滑动。 Div 1,3,5＆amp; 7应从左侧滑动，其余部分（2,4,6和8）应从右侧滑动。

我不知道如何做到这一点，但我听说可以使用CSS3动画完成：@keyframes规则。我将如何在我的页面上进行这些动画？

Answer 1

我认为你需要jquery：

$(document).on('scroll',function(){
// code here
});