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

2024-01-27 12:14:28

要求：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

码农公寓