html5动态切换class,页面滚动时为元素动态添加class类的jquery插件

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

使用方法

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

初始化插件

在页面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

}