【前端】使用wow.js这个插件(实现页面动画效果),提高前端开发效率。
1.简介
有的页面在向下滚动的时候,有些元素会产生细小的动画效果。比如需要做到滚动条滑到某个位置时,才能显示动画。
wow.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。
2.兼容性
IE6、IE7 等老浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。
3.如何使用?
1、wow.js依赖于animate.css,首先在头部引用animate.css或者animate.min.css。
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
2、在最底部或引入的css下面引用wow.js或者wow.min.js,然后再下面再写一行javascript代码。(无需引用jquery)
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">new WOW().init();//WOW要大写
</script>
如果需要自定义配置,可如下使用:
<script>
var wow = new WOW({boxClass: 'wow',animateClass: 'animated',offset: 0,mobile: true,live: true
});
wow.init();
</script>
相关参数说明:
3、写html代码(必须设置为块状或者行内块状),并添加class类名。
<div class="wow slideInLeft"></div>
另外可以加入 data-wow-duration(动画持续时间)、 data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)、data-wow-iteration(动画执行次数)属性 (可选可不选),如:
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>
下表为部分对应类名及其效果:
类名 | 动画效果 |
---|---|
wow slideInUp | 从下往上、上来后固定到设定位置、透明度为设定值不变(up是从下往上)(如果元素在最下面,会撑开盒子高度) |
wow slideInDown | 从上往下、上来后固定到设定位置、透明度为设定值不变 |
wow slideInLeft | 从左往右、上来后固定到设定位置、透明度为设定值不变(left却是从左往右) |
wow slideInRight | 从右往左、上来后固定到设定位置、透明度为设定值不变 |
wow rollIn | 从左到右、顺时针滚动、透明度从100%变化至设定值 |
wow bounceIn | 从原位置出现,由小变大超出设定值,再变小小于设定值,再回归设定值、透明度从100%变化至设定值 |
wow bounceInUp | 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变 |
wow bounceInDown | 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变 |
wow bounceInLeft | 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变 |
wow bounceInRight | 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变 |
wow lightSpeedIn | 从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度从100%变化至设定值 |
wow pulse | 原位置放大一点点在缩小至原本大小、透明度为设定值不变(配合动画执行次数属性效果更佳) |
wow flipInX | 原位置后仰前栽、透明度从100%变化至设定值 |
wow flipInY | 原位置左右旋动、透明度从100%变化至设定值 |
wow bounce | 上下抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖) |
wow shake | 左右抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖) |
wow swing | 从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度为设定值不变 |
wow bounceInU | 原位置不变、直接从不显示到显示(无过过渡效果) |
wow wobble | 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
测试–示例:
<!DOCTYPE html>
<html>
<head><title>wow演示</title><meta charset="utf-8"><!-- 1.引入wow依赖的animate.css --><link href="css/animate.css" rel="stylesheet" type="text/css"><!-- 2.引入wow.js 文件 --><script type="text/javascript" src="js/wow.js"></script><!-- 3.now 对象 --><script type="text/javascript">new WOW().init();// 可选的参数// wow = new WOW({// boxClass: 'wow', //WOW.js需要执行动画的元素的class // animateClass: 'animated', //animation.css 动画的 class// offset: 0, //距离可视区域多少开始执行动画 // mobile: true, //是否在移动设备上执行动画 // live: true //异步加载的内容是否有效// })// wow.init();</script>
</head>
<body><div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s" data-wow-offset="1000" data-wow-iteration="1" style="width: 500px;height: 1000px;background-color: #ccc;position: absolute;left: 50%;margin-top: 0px;margin-left: -250px;margin-bottom: 50px">wow 动画演示</div> </body>
</html>
4.备注
4.1 下载地址:animate.css:https://github.com/matthieua/WOW
或者打开链接: https://pan.baidu.com/s/1JPXqAYLj4zKazwDhbBELGQ?pwd=qxtx 提取码: qxtx 获取Wow的css和js包。
4.2 动画效果展示网站:https://daneden.github.io/animate.css/
4.3 参考 演示地址 http://www.dowebok.com/131.html
【前端】使用wow.js这个插件(实现页面动画效果),提高前端开发效率。相关推荐
- 动态效果html wow,WOW.js轻松让网页实现动画效果
给大家分享一个小插件,名字叫做WOW.js,这个插件是基于animate.css,animate.css是现在很流行的css动画库.这款插件作用很简单,可以及时实现网页中任意部分动画切入的效果.但是有 ...
- waypoint+animate元素滚动监听触发插件实现页面动画效果
最近在做一个官网类型滚动加载动画,使用到waypoint监听事件插件和animate动画样式,两者结合完美实现向下滚动加载动画,但是没有做向上滚动撤消动画,留待以后有空研究 首先来介绍下jquery. ...
- Web前端笔记-two.js实现坐标定位(动画效果非瞬移定位)
先来看下程序运行截图: 画图相关代码: ;import * as Two from "JS/two"; import * as $ from "JS/jquery&quo ...
- 面对前端六年历史代码,如何接入并应用ES6解放开发效率
作者/分享人:Lucas http://gitbook.cn/gitchat/author/583f821b87fdee392692ed22 写在最前 很荣幸有机会和大家分享自己在前端工作中的一些经验 ...
- 基于腾讯 x5 开源库,提高 webView 开发效率,大概要节约你百分之六十的时间成本。该案例支持处理 js 的交互逻辑且无耦合、同时暴露进度条加载进度、可以监听异常 error 状态、支持视频播放
YCWebView 项目地址:yangchong211/YCWebView 简介: 基于腾讯 x5 开源库,提高 webView 开发效率,大概要节约你百分之六十的时间成本.该案例支持处理 js 的交 ...
- js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- IntellJ IDEA 基础之 一些常用插件plugin 简单整理 (辅助提高编写代码效率)
IntellJ IDEA 基础之 一些常用插件plugin 简单整理 (辅助提高编写代码效率) 目录 IntellJ IDEA 基础之 一些常用插件plugin 简单整理 (辅助提高编写代码效率) 一 ...
- php加入js动态效果,js怎么给输入框增加动画效果
这次给大家带来js怎么给输入框增加动画效果,js给输入框增加动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. (function() { function p() { window.requ ...
- js实现酷炫倒计时动画效果
前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,于是想了下实现思路. <!DOCTYPE html> <html> < ...
最新文章
- Java源码详解四:String源码分析--openjdk java 11源码
- Vue.js 是什么
- 数据结构:线性表(java实现)
- 步步为营 .NET 代码重构学习笔记 三、内联方法(Inline Method)
- IplImage类型解释和举例
- python编程制作接金币游戏_pygame学习笔记(6):完成一个简单的游戏
- 前端学习(1837):前端面试题之变量提升
- MySQL系列:数据类型、运算符及函数(5)
- 刚过去不到一个月 QQ又更新了
- C++反汇编第一讲,认识构造函数,析构函数,以及成员函数
- 豪掷197亿美元!微软收购Siri背后的语音技术研发公司
- C++ 从入门到入土(English Version)Section4: Random numbers + machine code
- 39个C语言小程序(适合新手)
- 如何向公众号添加的H5页面的链接(已解决)
- android手机怎么投屏到电视盒子,手机钉钉怎么投屏到电视上
- 【Nmap】常用命令「一」——活跃主机发现
- 一张火车票背后的生意【下篇】
- 做内网穿透外网远程访问群晖NAS 2-2
- 三个常见博弈游戏以及 SG 函数和 SG 定理
- vue.runtime.esm.js:620 [Vue warn]: Error in nextTick: “TypeError: Cannot convert object to primitive
热门文章
- 人脸识别:Deep Face Recognition论文阅读
- Centos7 搭建Openv*n
- Battle over Cities
- fpga vivado 错误总结(本人遇到以及改正)
- apiDay09整理笔记(笔记优化)
- 通过DEBUG宏定义管理debug模式和release模式
- 资本存量数据集-地级市资本存量、三次产业、分地区固定资本存量等五大维度指标(已更新至2020年)
- zabbix+grafana安装
- 关于yml格式连接数据库出现Access denied for user ‘root‘@‘localhost‘ (using password: YES)
- 【转】DAO层,Service层,Controller层、View层