javascript - Anybody give me an idea about scrolling, How to applay Scrooling Animations when user starts scrolling a content -

i need add animations element when in viewport.

$(document).scroll(function(){  alert('how animate transitions left right, top bottom elements in 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>

try skrollr.js animation on scroll. although not updated quite long time, might give shot based on requirement. matches ask above.