动画插件wow.js的使用

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(动画执行次数)这四个属性可选可不选。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,907评论 1 45
  • 框架一 :: Animate.css Animate.css是一个css动画样式库,可以减少我们的开发时间.它预设...
    西巴撸阅读 2,786评论 0 5
  • 在AngularJS应用中创建动画,有三种途径: 使用CSS3动画 使用JavaScript动画 使用CSS3过渡...
    oWSQo阅读 1,505评论 0 3
  • 前言: 随着HTML5规范的不断完善,围绕着这一生态有很多实用的框架,极大的提高了我们的开发效率,常见的框架代表有...
    秒签T阅读 357评论 0 0
  • 今天不忙 把昨天抬变速箱的车又给处理了处理 油管都给清洗了一下避免里面还有磨子 同样的水箱也一样给清洗了一下 把准...
    京心达侯天祥阅读 156评论 0 0