当前位置：首页 > 网页特效 > 滚动

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

分类：滚动日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<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类。

```html
$('#myElement').scrollAddClass({
  className: 'fadeIn'
});  
```                
#### CSS样式 
指定的slideIn淡入效果的CSS代码如下：

```html
.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动画类，如：

```html
.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
}          
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果