animate.css wow.js结合使用(html滚动到可视区域显示动画)

要求:html滚动到可视区显示动画 animate.css wow.js结合使用

首先放上 cdn链接

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">  
<!-- 实现向下滚动页面都有效果 -->
<script type="text/javascript" src="https://cdn.dowebok.com/131/js/wow.min.js"></script> 
<!-- 实现上下滚动页面都有效果 -->
<script type="text/javascript" src="http://www.jeendo.com/script/wow/wow.min2.js"></script> 
   

页面添加元素

在想添加动画的元素中添加’wow’ (必须)
在想添加动画的元素中添加’animatecss’ (为动画的Class,可以在该网站找到合适的动画http://daneden.github.io/animate.css/ 自己写也可以)
例如:

<div class="wow bounce">标题</div> //bounce 是animate.css中的动画名称

注意:若是vue, 初始化应当在mounted生命周期中进行

<script>new WOW().init();</script>

也可以自定义wow.js

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

boxClass:用户滚动时显示隐藏框的类名。

animateClass:触发CSS动画的类名(animate.css库默认为“animated”)

偏移量:定义浏览器视口底部和隐藏框顶部之间的距离。
当用户滚动并到达这个距离时,隐藏的框被显示出来。

手机:在移动设备上打开/关闭WOW.js。

live:自动检查页面上的新WOW元素。

其他属性

在css下方js上方写需要动画的元素(必须设置为块状或者行内块状),并添加class类名

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="2s" data-wow-offset="10"  
  data-wow-iteration="10"></div>  

后面的data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)这四个属性可选可不选

页面反复滚动都有效果

注意:一定要先引入wow.min.js,然后在加上这个代码就反复滚动都有效果了

<script type="text/javascript" src="http://www.jeendo.com/script/wow/wow.min2.js"></script> 

IE浏览器出现个别不兼容的情况 需要加上判断

IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断

<script type="text/javascript">
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
        new WOW().init();
    };
</script>

有的网站采用全屏滚动的fullpage插件与wow相结合的方法

但是使用fullpage.js下wow.js无效失效没动作

问题出在fullpage隐藏了滚动条,将滚动条开启即可,把scrollBar设置为true,代码如下

$('#fullpage').fullpage({
 scrollBar:true;
});

最后利用css将滚动条隐藏,将html添加overflowhidden,代码如下

 html{
    overflow:hidden;
  }

本文参考多个文章:原文链接:
http://www.manongjc.com/detail/16-yxlccuogywmdsqk.html https://www.cnblogs.com/xgxm13/p/7667296.html
https://www.freesion.com/article/28891028389/
https://www.cnblogs.com/xiaomifeng/p/12700026.html

上一篇:重新定义RPA,重塑智能生产力 | 云扩科技RPA论坛成功举办


下一篇:vue中使用woo.js + animate.css