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

当前位置:主页 > jQuery库 > 布局和界面 > 页面滚动时为元素动态添加class类的jquery插件
页面滚动时为元素动态添加class类的jquery插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-08-18
    阅读:
麦子学院
简要教程

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

网友评论