wow.js 滚动动画js插件，效果非常多，使用animate.css动画库-BFW插件库

wow.js 滚动动画js插件，效果非常多，使用animate.css动画库

var wow = new WOW(
  {
    boxClass:     'wow',      // animated element css class (default is wow) 类名
    animateClass: 'animated', // animation css class (default is animated) 动画类
    offset:       0,          // distance to the element when triggering the animation (default is 0) 偏移
    mobile:       true,       // trigger animations on mobile devices (default is true) 是否在手机上运行
    live:         true,       // act on asynchronously loaded content (default is true) 同步加载
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated 回调函数
    },
    scrollContainer: null // optional scroll container selector, otherwise use window 容器对象
  }
);
wow.init();

使用bfwone动态加载wow的示例如下

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["wow", "animate"], function() {
                wow = new WOW(
                    {
                        animateClass: 'animated',
                        offset: 100,
                        callback: function(box) {
                            console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
                        }
                    }
                );
                wow.init();
                document.getElementById('moar').onclick = function() {
                    var section = document.createElement('section');
                    section.className = 'section--purple wow fadeInDown';
                    this.parentNode.insertBefore(section, this);
                };
            });
        });
    </script>
    <style>
        body {
            background: white;
        }
        h1 {
            font-size: 72px;
            line-height: 1.5;
            color: #2c3e50;
            font-weight: 100;
        }

        #container {
            width: 980px;
            margin: 0 auto;
        }

        section {
            height: 300px;
            margin: 60px 0;
        }

        .section--purple {
            background-color: #9b59b6;
        }

        .section--blue {
            background-color: #3498db;
        }

        .section--green {
            background-color: #2ecc71;
        }

        #main {
            text-align: center;
        }

        #more {
            margin: 20px auto 48px;
        }
    </style>
</head>
<body>
    <div id="container">
        <header>
            <h1>WOW.js</h1>
        </header>
        <div id="main">
            <section class="wow fadeInDown" style="background-color: #f1c40f;"></section>
            <section class="wow pulse" style="background-color: #e74c3c;" data-wow-iteration="infinite" data-wow-duration="1500ms"></section>
            <section class="section--purple wow slideInRight" data-wow-delay="2s"></section>
            <section class="section--blue wow bounceInLeft" data-wow-offset="300"></section>
            <section class="section--green wow slideInLeft" data-wow-duration="4s"></section>
            <button id="moar">加载更多</button>
        </div>
    </div>
</body>
</html>