WOW.js+animate.css让页面滚动时显示动画效果 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/animate.css" />
        <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
        <script type="text/javascript" src="js/wow.min.js" ></script>
        <script>
            new WOW().init();
        </script>
    </head>
    <body>
        <h2 class="wow fadeInDown" data-wow-duration="1s">1213242343</h2>
        <p class="wow fadeInDown" data-wow-duration="2s">fdgfhfghgh</p>
        <div class="wow fadeInLeft" data-wow-duration="1s">的规定发给发</div>
        <div class="wow fadeInRight" data-wow-duration="2s">地方给丰东股份</div>
    </body>
</html>

 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）

如果需要自定义配置，可如下使用：

var wow = new WOW({
        boxClass: 'wow',
        animateClass: 'fadeInDown',
        offset:       100,          
        mobile:       true,      
        live:         true,  
    });

    wow.init();

 

posted @ 2018-01-26 15:12  爽朗琴天  阅读(225)  评论(0)    收藏  举报