如何让你的页面更加多彩
2019-05-06 本文已影响0人
择一城终老_3069
先上需求。
场景：dom在浏览器可视区再加载动画
方案：很简单 如下
1.利用wow.js实现效果，但是要依赖于animate.css
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/wow.js"></script>
<script type="text/javascript">
new WOW().init();
</script>
2.准备完成，html 如下 （PS:主要是记录使用方法，就不写太多样式了）
<style>
body { display: flex; flex-direction: column; align-items: center;}
.fadeInUp{ height: 200px; width: 200px; background-color: red;margin-bottom: 100vh;}
</style>
<div class="wow fadeInUp">1111</div>
<div class="wow fadeInUp">222</div>
打开浏览器，你会看到我们得需求已经初步实现了
3.严谨得一批
有时候我们需要动画执行前有短时间得延迟，或者其他得一些需要
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>
data-wow-duration：更改动画持续时间
data-wow-delay：动画开始前的延迟
data-wow-offset：开始动画的距离（与浏览器底部相关）
data-wow-iteration：动画的次数重复（无限次：infinite）
这些属性是可选项
4.踩坑提示
4-1 在css下方js上方写需要动画的元素（必须设置为块状或者行内块状！），并添加class类名。
4-2 总结点wow.js依赖于animate.css得综合写法
| 代码 | 注释 |
|---|---|
| wow rollIn | 从左到右、顺时针滚动、透明度从100%变化至设定值 |
| wow bounceIn | 从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值 |
| wow bounceInUp | 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变 |
| wow bounceInDown | 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变 |
| wow bounceInLeft | 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变 |
| wow bounceInRight | 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变 |
| wow slideInUp | 从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度） |
| wow slideInDown | 从上往下、上来后固定到设定位置、透明度为设定值不变 |
| wow slideInLeft | 从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右） |
| wow slideInRight | 从右往左、上来后固定到设定位置、透明度为设定值不变 |
| wow lightSpeedIn | 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值 |
| wow pulse | 原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳） |
| wow flipInX | 原位置后仰前栽、透明度从100%变化至设定值 |
| wow flipInY | 原位置左右旋动、透明度从100%变化至设定值 |
| wow bounce | 上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） |
| wow shake | 左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） |
| wow swing | 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变 |
| wow bounceInU | 原位置不变、直接从不显示到显示（无过过渡效果） |
| wow wobble | 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
