ページスクロールでアニメーションのスライドを作成するにはどうすればよいですか？

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 & 7は左からスライドし、残りの部分（2、4、6 & 8）は右からスライドする必要があります。

私はこれをどうやって行うのか考えていませんが、CSS3のアニメーションではこれができると聞いています：@keyframesルール私はどのように私のページでこれらのアニメーションをやりますか？

Answer 1

私はあなたがこのためのjQueryを必要とすると思います。

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