一个小而高性能的滚动动画jQuery插件，当用户向下滚动到页面的指定位置时，它会对元素应用平滑的淡入淡出或滑动动画。

它使用Undercore.js库中的“throttle”函数来提供平滑优化的动画性能。

如何使用它:

1.在文档中加载必要的jQuery和jQuery UI库（用于动画和额外的轻松功能）。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2.在jQuery之后下载并加载jQuery ScrollAnimate插件。

<script src="/path/to/jquery.scrollanimate.min.js"></script>

3.将以下HTML数据属性添加到将在滚动时设置动画的目标元素中。

• 数据显示：此时开始动画
• 数据隐藏：在此点结束动画
• 数据动画：动画类型：“淡入淡出”、“滑动”、“向左滑动”或“向右滑动”

<div class="box" 
     data-show="200" 
     data-hide="400" 
     data-animation="fade">
     Fade Animation
</div>
 
<!-- OR -->
<div class="box" 
     data-show="50%" 
     data-hide="70%" 
     data-amination="slide">
     Slide Animation
</div>

4.在页面加载时隐藏元素。

.box {
  display: none;
  /* more styles here */
}

5.使用设置调用插件。

$('.box').scrollAnimate({
  // config the animation here
  throttle: 50,
  duration: 300,
  easing: "swing"
});

预览截图

滚动触发淡入淡出/滑动动画 jQuery插件 滚动动画