如何在用户开始滚动内容时应用滚动动画

Question

我需要在视口中添加一些动画。

$(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>

Answer 1

在滚动时尝试Skrollr.js动画。虽然这很长时间没有更新，但你可以根据你的要求给它一个镜头。它符合你上面的要求。

Answer 2

在滚动时尝试动画​​。 下载AOS的库并在您的代码中添加。这里是您可以找到库的链接，还有完整的示例如何在您的html类中使用。 https://michalsnik.github.io/aos/