WOW 页面滚动时动画效果展示 – 爱CSS - 每多学一点知识就少写一行代码

关闭边栏(ESC)打开边栏(ESC)

引入文件

<link rel="stylesheet" href="css/animate.min.css">
<script src='js/wow.min.js'></script>

1 2	<link rel="stylesheet" href="css/animate.min.css"> <script src='js/wow.min.js'></script>

html结构

动画的效果，可以参考这里：animate.css

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

1 2	<div class="wow slideInLeft"></div> <div class="wow slideInRight"></div>

动画时间

可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如：

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

1 2	<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div> <div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>

JS设置

new WOW().init();

1	new WOW().init();

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

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

var wow = new WOW({

boxClass: 'wow',

animateClass: 'animated',

offset: 0,

mobile: true,

live: true

});

wow.init();

用Css或插件实现瀑布流布局的问题小结

CSS 2018-10-28 2

前些天小宇提醒了一下，他打算弄一个瀑布流的布局，问了我有没有css直接解决的方法，刚开始我就…

HTML与CSS书写规范

CSS 2016-12-04 0

HTML编码规范：使用小写元素名:<session> 关闭所有HTML元素:<p></p>…

文章页没有特色图时显示的风格

HTML 2017-02-09 1

多个半透明层切换的首页效果

CSS 2017-02-06 5

display:table和display:table-cell的妙用

CSS 2018-08-04 1

复选框 | 自定义CSS美化后的复选框

CSS 2017-04-30 3

目录

引入文件

html结构

动画时间

JS设置

假期第一天 | 骑共享车逛佛山

wordpress评论Ajax提交

用Css或插件实现瀑布流布局的问题小结

HTML与CSS书写规范

文章页没有特色图时显示的风格

多个半透明层切换的首页效果

display:table和display:table-cell的妙用

复选框 | 自定义CSS美化后的复选框

向WOW 实现页面滚动时动画效果展示 - 知言进行回复取消回复

SQL Server 常用近百条SQL语句（收藏版）

SQL高效查询两个表不同的数据

五岁生日 | 这一年跟表姐一块庆祝生日，可心的一天了

跨域 | 百度联想词二种方式来实现

$.ajax({})方法success，error，complete，beforeSend

目 录

引入文件

html结构

动画时间

JS设置

假期第一天 | 骑共享车逛佛山

wordpress评论Ajax提交

向WOW 实现页面滚动时动画效果展示 - 知言进行回复 取消回复

目录

向WOW 实现页面滚动时动画效果展示 - 知言进行回复取消回复