美文网首页
动画插件wow.js的使用

动画插件wow.js的使用

作者: 郭郭呐 | 来源:发表于2018-10-10 18:50 被阅读0次

    wow.js使用步骤:

    1.wow.js插件可以使页面形成各种各样的动画效果。

    2.使用步骤:

     wow.js依赖于animate.css,首先需要在head内引入animate.css

     再引入wow.js,然后js文件里再写一行代码如下:

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

    <script>

             wow = new WOW({

                                animateClass: 'animated',

                          });

                           wow.init();

    </script>

    再在元素中添加相应的类名 如:

    <h1 class="wow animated slidelenLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="2">我爱前端</h1>

    wow是必须要添加的

    slideInLeft说明了动画的样式,是从左边滑动出来的

    后面的data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)这四个属性可选可不选。

    相关文章

      网友评论

          本文标题:动画插件wow.js的使用

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