页面滚动时为元素动态添加class类的jquery插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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