html 页面加载完成滑动过程增加动画效果
发布时间
阅读量：
阅读量
这两天专注于开发一个响应式公司官网网站，在完成初稿后发现整个页面呈现静态状态显得平淡无奇不够吸引人。于是设计者希望在网页滑动过程中展示丰富的动态效果以增强视觉体验需求促使团队开始探索利用css3系列动画技术实现这一目标。为此我们首先将基本动画效果进行系统化编写并分析现有网页需求确定哪些类型的动画最能契合实际应用场景随后逐步整合到已有界面中测试其表现最终通过调研发现wow.js是一个功能丰富且易于使用的解决方案值得推荐给有类似开发需求的朋友也便于以后进一步完善网站功能
wow.js动画库的git下载地址为：
https://github.com/matthieua/WOW
看了一下官网感觉不是很好用，调用方式为：
引入css文件
在页面的底部引入wow.js文件并且初始化 wow
然后就可以在页面中使用这个动画库中的各种动画. 你只需添加你想使用的动画效果的类即可.
下面列举一下我经常用到的属性和class的效果：
data-wow-duration: 此属性允许您更改视觉效果的时长。
data-wow-delay: 此属性指定视觉效果启动前等待的时间。
data-wow-offset: 此属性指定从屏幕底部开始执行视觉效果的位置（通常以像素为单位）。
data-wow-iteration: 此属性设置为视觉效果循环使用的次数，默认情况下会永不停止。
| 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 | 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
每天一个小知识，代码写的越来越顺利~
全部评论 (0)
还没有任何评论哟~