jquery-scrollAddclass是一款可以在页面滚动时为元素动态添加class类的jquery插件。你可以定制自己的class类，使元素在进入视口时产生指定的动画效果。

使用方法

在页面中引入jquery和imagesloaded.js文件，以及jquery-scrollAddClass.js文件。

<script src="path/to/jquery.min.js"></script>
<script src="path/to/imagesloaded.pkgd.min.js"></script>        
<script src="path/to/jquery-scrollAddClass.js"></script>        
                

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来在指定的元素上添加指定的class类。

$('#myElement').scrollAddClass({
  className: 'fadeIn'
});                  
                

CSS样式

指定的slideIn淡入效果的CSS代码如下：

.main .js-fadeIn {
  -ms-filter: "alpha(opacity=0)";
  opacity: 0;
  transition: all 0.9s linear;
  -webkit-transition: all 0.9s linear;
  -moz-transition: all 0.9s linear;
  -o-transition: all 0.9s linear;
  -ms-transition: all 0.9s linear;
}

.main .js-fadeIn.fadeIn {
  -ms-filter: "alpha(opacity=100)";
  opacity: 1;
}                  
                

你也可以指定自己的CSS动画类，如：

.myElement {
  transition: all .4s linear;
  -webkit-transition: all .4s linear;
  -moz-transition: all .4s linear;
  -o-transition: all .4s linear;
  -ms-transition: all .4s linear;
  -ms-filter: "alpha(opacity=0)";
  opacity: 0;
  transform: translate(0, 60px);
  -webkit-transform: translate(0, 60px);
  -moz-transform: translate(0, 60px);
  -o-transform: translate(0, 60px);
  -ms-transform: translate(0, 60px)
}

.myElement.slideIn {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -ms-filter: "alpha(opacity=100)";
  opacity: 1
}                 
                

jquery-scrollAddclass.js插件的官方github地址：https://github.com/Black-Yamasan/jquery-scrollAddclass

在线预览    源码下载