美文网首页
wow.js使用教程

wow.js使用教程

作者: MC桥默 | 来源:发表于2019-09-29 14:31 被阅读0次
    doc.jpg
    设置WOW.js

    1.引入css动画库

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

    2.引入wow.js并且初始化

    <script src="js/wow.min.js"></script>
    <script>
               new WOW().init();
    </script>
    
    显示CSS动画

    1.设置css类

    将CSS类.wow添加到HTML元素:在用户滚动显示它之前,它将是不可见的。

    <div class="wow">
           Content to Reveal Here
    </div>
    

    2.选择动画类型
    在Animate.css中选择一个动画样式,然后将CSS类添加到HTML元素中。

    <div class="wow bounceInUp">
            Content to Reveal Here
    </div>
    
    高级选项

    data-wow-duration: 更改动画持续时间
    data-wow-delay: 动画开始前的延迟
    data-wow-offset: 开始动画的距离(与浏览器底部相关)
    data-wow-iteration: 动画重复的次数

    <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
    
    <section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>
    
    自定义设置

    boxClass: 用户滚动时显示隐藏框的类名。
    animateClass: 触发CSS动画的类名(animate.css库默认为'animated')
    offset: 定义浏览器视口底部与隐藏框顶部之间的距离。当用户滚动并到达该距离时,隐藏的框被显示出来。
    mobile: 在移动设备上打开/关闭WOW.js。
    live: 在页面上不断检查新的WOW元素。

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

    相关文章

      网友评论

          本文标题:wow.js使用教程

          本文链接:https://www.haomeiwen.com/subject/jnnhuctx.html