有人給我一個關於滾動的想法，當用戶開始滾動內容時如何塗抹Scrooling動畫

我需要在viewport中添加一些動畫元素。有人給我一個關於滾動的想法，當用戶開始滾動內容時如何塗抹Scrooling動畫

$(document).scroll(function(){ 
 
alert('How to animate with transitions left to right, top to bottom elements in my Structure '); 
 
});

.main-container{ 
 
width:900px; 
 
height:100%; 
 
overflow:auto; 
 
background:#00496d; 
 
color:#fff; 
 
} 
 
#section1,#section2,#section3,#section4,#section5,#section6{ 
 
width:100%; 
 
height:300px; 
 
border:1px solid #fff; 
 
margin:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main-container"> 
 
<div id="section1"></div> 
 
<div id="section2"></div> 
 
<div id="section3"></div> 
 
<div id="section4"></div> 
 
<div id="section5"></div> 
 
<div id="section6"></div> 
 
</div>

來源

2017-04-14 Samudrala Ramu

我需要一些實時的例子。 –

你想應用什麼類型的動畫？ –

我需要添加不同的動畫到不同的元素，當它來到視口 –