wow.js 结合 animate.css - 实现页面往下滑动加载内容效果

第一步：引入animate.css和wow.js并初始化

<link rel="stylesheet" href="css/animate.min.css">

<script src="js/jquery.min.js"></script>
<script src="js/wow.min.js"></script>

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

第二步：在页面需要延迟加载的区域添加效果

    <div class="aboutAPG">
        <h3 class="commonTitle wow fadeInDown animated" data-wow-delay="0.2s">标题</h3>
        <div class="aboutAPGContent wow fadeInDown animated" data-wow-delay="0.4s">
            我是大段区域简介...
        </div>
        <ul class="supportArea clearfix">
            <li class="supportArea1 wow fadeInLeft animated" data-wow-delay="0.6s">
                我是区块子内容1
            </li>
            <li class="supportArea2 wow fadeInLeft animated" data-wow-delay="0.8s">
                我是区块子内容2
            </li>
            <li class="supportArea3 wow fadeInLeft animated" data-wow-delay="1s">
                我是区块子内容3
            </li>
            <li class="supportArea4 wow fadeInLeft animated" data-wow-delay="1.2s">
                我是区块子内容4
            </li>
        </ul>
    </div>

主要是由class="wow fadeInDown animated" 和 data-wow-delay="0.ns"控制。动画出入的方式很多种，具体前往官网查看：

https://animate.style/

可以在线查看animate支持的很多种动画。

---

效果如下：